nginx配置ajax请求跨域
生活随笔
收集整理的這篇文章主要介紹了
nginx配置ajax请求跨域
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先通過(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)題。
- 上一篇: java Jsoup不能获取完整响应内容
- 下一篇: jquery无法删除一级域名cookie