通過修改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的修改應該就可以解決問題。