首先通過(guò)mozilla文檔了解跨域原理:

web跨域的方式有幾種，常見(jiàn)的方案有web服務(wù)后端代碼層級(jí)解決與nginx配置層面解決，這里我以nginx配置層面為例。

一般瀏覽器跨域請(qǐng)求的時(shí)候會(huì)先發(fā)起option預(yù)檢測(cè)請(qǐng)求，當(dāng)請(qǐng)求得到確認(rèn)后，才開始真正發(fā)送請(qǐng)求。

因此，首先應(yīng)該解決預(yù)請(qǐng)求的跨域問(wèn)題,以下是nginx針對(duì)預(yù)請(qǐng)求的配置:

HTTP 204 成功狀態(tài)響應(yīng)碼表示該請(qǐng)求已經(jīng)成功了，但是客戶端客戶不需要離開當(dāng)前頁(yè)面。默認(rèn)情況下 204 響應(yīng)是可緩存的。一個(gè) ETag 標(biāo)頭包含在此類響應(yīng)中。

前端使用jquery發(fā)起ajax跨域攜帶cookie的請(qǐng)求代碼：

效果：

接著在nginx配置正式請(qǐng)求的跨域：

重啟nginx后，正式請(qǐng)求效果:

nginx配置內(nèi)容:

location / {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' 'https://test.xx.com';add_header Access-Control-Max-Age 1728000;add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';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';add_header Content-Type' 'text/plain; charset=utf-8';add_header Content-Length 0;return 204;}add_header 'Access-Control-Allow-Origin' 'https://test.xx.com';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';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';client_max_body_size 20m;proxy_pass http://xxx.xxx.10.200:8095;proxy_set_header Host $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}

?

總結(jié)

以上是生活随笔為你收集整理的nginx配置ajax请求跨域的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。