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

Posted 2023-03-04

【中文标题】localhost webapp 上的本地开发和 Cors 策略阻止的 localhost 访问

【英文标题】：local development on localhost webapp and localhost access blocked by Cors policy

【发布时间】：2019-11-18 20:06:27

【问题描述】：

我正在尝试开发 web 应用程序和 api，但我遇到了 cors 阻塞。 这对我来说有点新，但我想变得更好。

所以我有一个用于 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);

然后我的网络应用程序使用 fetch 发出 Post 请求：

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', '*'); 它将解决我的问题。 Postman 可以成功访问路由。但是当我使用浏览器时，它会被拒绝。如果我将服务器和 Web 应用程序投入生产，也会发生同样的事情。我错过了什么？你能像我五岁一样解释吗？

提前感谢您的所有帮助。

【问题讨论】：

你不必手动设置res.headers，这就是cors()所做的。

【参考方案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!' );
  );

【讨论】：

谢谢。我还注意到，我没有使用 'Content-Type': 'application/json' ，而是使用 'Content-Type': 'application/x-www-form-urlencoded' 或 text/plain 它可以工作。尝试使用 json 来标记安全问题对吗？