[英]No 'Access-Control-Allow-Origin' react express docker app
I am using docker to run a front end react application and a node/express api. 我正在使用docker来运行前端反应应用程序和node / express api。 The react app is running on
localhost:3000
and the api is running on localhost:9000
. react应用程序在
localhost:3000
上运行,api在localhost:9000
上运行。 They are both fully functioning and working apps. 它们都是功能齐全的应用程序。 However when I try to make a rest call from the React app to
http://localhost:9000/api/whatever
I am getting the following error 但是,当我尝试从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.`
This is my server.js file for my express api : 这是我的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);
})
Not sure what I'm missing here. 不知道我在这里缺少什么。
Chrome network tab : 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
I have been able to do this before with the following configuration: 之前我已经能够使用以下配置执行此操作:
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();
}
});
As you can see in my case I was allowing more methods than only the GET
one and added additional allowed headers (such as the Authorization
one that I needed in this case), notice that in your case you specified only X-Requested-With
and Content-Type
, but you might as well need the Origin
one if you want to validate the origin. 正如您在我的案例中所看到的那样,我允许更多的方法,而不仅仅是
GET
并添加了额外的允许标题(例如我在这种情况下需要的Authorization
标题),请注意,在您的情况下,您只指定了X-Requested-With
和Content-Type
,但如果要验证原点,则可能需要Origin
one。
I am as well intercepting the OPTIONS
request to avoid sending additional data in that case. 我也可以截取
OPTIONS
请求,以避免在这种情况下发送其他数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.