javascript CORS中的Post方法有问题?

rhfm7lfc  于 2023-02-07  发布在  Java
关注(0)|答案(2)|浏览(136)

我正在开发一个应用程序与我自己的服务器,我配置我的cors与客户端主机只。一切似乎都很好,我可以请求数据库中的数据使用GET,但每当我试图POST或创建,我总是有“响应预检请求不通过访问控制检查:“请我做错了什么?以下是我的代码
我的服务器端

const allowedOrigins = [
    'http://localhost:3000/'
]
const CorsOptions = {
    origin: allowedOrigins,
    Credentials: true,
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
    allowedHeaders: ['Content-Type'],
    optionsSuccessStatus: 204
}
const cors = require('cors')
const CorsOptions = require('./config/CorsOptions')
app.use(cors(CorsOptions))
app.use(express.urlencoded({ extended: false }))
app.use(express.json())

我的客户端

const response = await fetch('http://localhost:8000/workout', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type':'application/json'
            },
        })
        const json = await response.json()
        if(!response.ok){
            errors(json.message)
        }
        if(response.ok){
            reset(data)
            console.log('New Workout added successfully', json)
        }

错误

Access to fetch at 'http://localhost:8000/workout' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

GET请求与上面的所有这些设置完美地工作,但是由于某种原因POST或任何其他请求总是给我这个错误
我还没有做任何事情,我将感谢任何帮助。

b5buobof

b5buobof1#

很可能是权限问题,

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

将CORS标头配置到服务器端代码中以允许来自本地主机的请求
此标头指定允许哪些域向您的服务器发出请求。

enxuqcxy

enxuqcxy2#

如果你正在使用Chrome来调试你的应用程序,那么这可能就是原因,因为Chrome不支持从本地主机发出POST请求。bug report是为此设计的,但它被标记为WontFix,所以它可能不会很快改变。
This extension通过将Access-Control-Allow-Origin报头设置为*沿着一些其他内容来绕过这个问题。
您可能还需要考虑this npm package,因为您已经在使用Express。
希望这有帮助!

相关问题