通过修改Nginx来解决跨域访问问题

现在的项目中前端页面如果要访问其他域名的webservice/APIs 都是通过在node js中封装调用其他域名的webservice/APIs,然后node js再发布出前端要访问的相同域名下的APIs来解决的。

这样前端就不会存在要跨域访问APIs的问题了。这样当然是一种解决办法，但自己还是想试下直接跨域访问的办法。

1. 前端页面通过ajax直接访问报

 

 

 

 

 

  2. 于是去node js中为response header加入"Access-Control-Allow-Origin"="*" 等属性,允许跨域访问. 重新调用还是报同样错误。

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers",
"Origin, X-Requeted-With, Content-Type, Accept, Authorization, RBR");
if (req.headers.origin) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
}
if (req.method === 'OPTIONS') {
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE");
return res.status(200).json({});
}
next();
});

3.由于前端和node js Server端中间是通过ngnix反向代理,于是找到nginx 中的conf文件,通过如下代码允许跨域访问（记得一定要加'always',因为不加的话,只会作用于http response code 为2XX，3XX的请求，如果是4XX或者5XX等其它返回请求，就不会在头部加如下的3个参数了）

add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

　　

4.再次在前端提交跨域请求就不会报跨域问题了。(403 是node js 其它的问题和跨域无关)

 

 

5.这样通过在nginx中配置response header的方法就解决了前端直接通过ajax跨域访问的问题，如果没有用nginx, 第二步中的node js的修改应该就可以解决问题。