Question

我正在尝试同时开发Web应用程序和API，但我正在尝试进行错误拦截。这对我来说有点新，但是我想变得更好。

所以我有一个用于api的快速服务器：

const express = require('express')
const cors = require('cors')
const app = express()

module.exports = app.post('/posttest/', cors(), async (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.json({ msg: 'WHOAH with CORS it works!' })
})

这是在http://localhost:3000上本地提供的 “ posttest”是我的路线的上述模块。

const posttest = require('./src/routes/posttest.js')
const server = require('http').createServer();
const { Router } = require('express');

server
  .on(
    'request',
    Router({ mergeParams: true })
    .use( posttest )
  )
  .on('listening', () =>{
    console.log('listeing');
  })
  .on('error', () => {
    console.log('ERROR!!!!');
  })
  .listen(3000);

然后我有一个Web应用程序，该应用程序使用访存进行发布请求：

fetch('http://localhost:3000/posttest/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({text:'test'}),
    mode: 'cors' }) .then( (res) => {   //resolve }) .catch( (err) => {   //error    });

我还应该提到，该Web应用程序是通过localhost：8080在本地提供的

问题是当我尝试发出发布请求时，我得到了

以下错误。可以访问“ http://localhost:3000/posttest/”处的内容来自来源“ http://localhost:8080”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：否请求中存在“ Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

我使用chrome到底值多少钱。那么这是怎么回事？我以为如果包含res.header('Access-Control-Allow-Origin', '*');可以解决我的问题。邮递员可以成功访问路线。但是当我使用浏览器时，它被拒绝了。如果我将服务器和Web应用程序投入生产，也会发生同样的事情。我想念什么？您能像我五岁那样解释它吗？

在此先感谢您的帮助。

Answer 1

pre-flight request是一个OPTIONS请求，并且您的cors()处理程序仅附加到POST请求（通过.post）。使用

  app.use(cors());

全局禁用CORS（并回答预检）。您也可以enable pre-flight requests进行一条路线：

  app.options("/posttest/", cors());
  app.post('/posttest/', cors(), async (req, res, next) => {  
   res.json({ msg: 'WHOAH with CORS it works!' });
  });

Cors策略阻止了localhost webapp上的本地开发和localhost访问

1 个答案: