没有'Access-Control-Allow-Origin'反应快递码头应用程序

Posted 2023-02-22

【中文标题】没有\'Access-Control-Allow-Origin\'反应快递码头应用程序

【英文标题】：No 'Access-Control-Allow-Origin' react express docker app没有'Access-Control-Allow-Origin'反应快递码头应用程序

【发布时间】：2017-09-05 00:34:38

【问题描述】：

我正在使用 docker 来运行一个前端反应应用程序和一个 node/express api。 React 应用在 localhost:3000 上运行，而 api 在 localhost:9000 上运行。它们都是功能齐全且正常工作的应用程序。但是，当我尝试从 React 应用程序向 http://localhost:9000/api/whatever 拨打休息电话时，我收到以下错误

XMLHttpRequest cannot load http://localhost:9000/api/schedule. No
Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:3000' is therefore not allowed access.`

这是我的 express api 的 server.js 文件：

const express = require('express');
const port = process.env.PORT || 9000;

const app = express();

require('./app/routes')(app);
app.use(function(req, res, next) 
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
);
app.listen(port, () => 
    console.log('listening on port : ' + port);
)

不确定我在这里缺少什么。

Chrome 网络标签：

Request URL:http://localhost:9000/api/schedule
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:9000
Response Headers
view source
Connection:keep-alive
Content-Length:86
Content-Type:application/json; charset=utf-8
Date:Mon, 10 Apr 2017 04:40:06 GMT
ETag:W/"56-l2wi6AdD2GGTOMvRjRYO96YmR0w"
X-Powered-By:Express
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:9000
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/56.0.2924.87 Safari/537.36

【问题讨论】：

首先，你只发出 GET 请求吗？其次，您是否在请求中设置了任何“非标准”标头？第三，发布浏览器代码会不会太难？

是的，API 现在只是 GET。不设置任何不标准的东西。只需使用 axios.get()。将使用网络标签更新

好吧，Response Headers 中肯定没有 CORS 标头

@JaromandaX 对...我错过了什么？

尝试控制台 req.headers 并检查你得到的主机

【参考方案1】：

我以前可以通过以下配置做到这一点：

app.use((req, res, next) => 
  const origin = req.get('origin');

  // TODO Add origin validation
  res.header('Access-Control-Allow-Origin', origin);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control, Pragma');

  // intercept OPTIONS method
  if (req.method === 'OPTIONS') 
    res.sendStatus(204);
   else 
    next();
  
);

正如你在我的例子中看到的那样，我允许的方法不仅仅是 GET 一个，并添加了额外的允许标题（例如我在这种情况下需要的 Authorization 一个），请注意，在你的例子中，你指定了只有X-Requested-With 和Content-Type，但如果您想验证来源，您可能还需要Origin。

我也拦截了OPTIONS 请求以避免在这种情况下发送额外的数据。