上篇文章談過了springboot在跨域中的兩種解決方法,但是可能還需要在web容器上做些支援,才能完美解決跨域的問題。
在跨域中的兩種解決方法》
location /
proxy_http_version、proxy_set_header upgrade、proxy_set_header connection部分大家可以暫且忽略,為websocket部分配置。
access-control-allow-origin:伺服器預設是不被允許跨域的。給nginx伺服器配置`access-control-allow-origin *`後,表示伺服器可以接受所有的請求源(origin),即接受所有跨域的請求。
access-control-allow-methods:允許通過的方法,可以防止content-type is not allowed by access-control-allow-headers in preflight response的錯誤資訊
先來說下如何解決:可以在 location / {} 配置中加入如下**:
if ($request_method = 'options')
給options
新增204
的返回,是為了處理在傳送post請求時nginx依然拒絕訪問的錯誤
傳送"預檢請求"時,需要用到方法options
,所以伺服器需要允許該方法
再來波解釋:
其實上面的配置涉及到了乙個w3c標準:cros
,全稱是跨域資源共享 (cross-origin resource sharing),它的提出就是為了解決跨域請求的。
跨域資源共享(cors)標準新增了一組 http 首部字段,允許伺服器宣告哪些源站有許可權訪問哪些資源。另外,規範要求,對那些可能對伺服器資料產生***的http 請求方法(特別是 get 以外的 http 請求,或者搭配某些 mime 型別的 post 請求)
,瀏覽器必須首先使用 options 方法發起乙個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。伺服器確認允許之後,才發起實際的 http 請求。在預檢請求的返回中,伺服器端也可以通知客戶端,是否需要攜帶身份憑證(包括 cookies 和 http 認證相關資料)。
multipart/form-data
... 省略了一些伺服器回應時,返回的頭部資訊如果不包含access-control-allow-headers: content-type
則表示不接受非預設的的content-type。即出現以下錯誤:
request header field content-type is not allowed by access-control-allow-headers in preflight response.
解決請求跨域問題
滿足以上任意乙個就算跨域。跨域的解決方案很多,可以在前端解決,也可以在後端解決。1 在main.js中設定axios請求的預設字首 axios.defaults.baseurl api 2 在vue.config.js中配置 module.exports 方式一 crossorigin註解 在con...
nginx解決跨域問題!
1 問題背景 前端呼叫線上後段時出現跨域問題!解決方法nginx的location頭部增加配置 add header access control allow headers add header access control allow methods get,post,options,head,...
nginx 解決跨域問題
跨域問題的存在 如果用ajax請求的資源網域名稱和原網頁的網域名稱不一致就會產生跨域請求問題,為了解決這一問題,可以在http響應裡面設定響應頭為允許跨域,但一般不會這麼做。使用nginx來解決跨域問題的手段是 因為nginx可以進行反向 因此可以進行網域名稱對映,讓不同服務的網域名稱對映為有相同的...