nginx跨域訪問
『壹』 nginx怎麼修改跨域配置
通過add_header參數添加CORS跨域響應頭即可 Access-Control-Allow-Origin控制跨域源 Access-Control-Allow-Credentials控制是否帶cookie Access-Control-Expose-Headers控制跨域拿到的一些額外欄位
『貳』 如何設置nginx允許跨站請求
添加如下location:123location/{add_headerAccess-Control-Allow-Origin*;}。會在響應頭中添加Access-Control-Allow-Origin欄位以允許跨域。
『叄』 「非」前後端分離javaweb項目,怎麼使用nginx跨域
1:既然是別的api服務,那就建議你在jsp頁面發起http請求去處理,不要用常用的ajax。
2:如果就用ajax,那可以看下jQuery封裝下的ajax,有一個jsonp ,可以了解下。但是相對的可能api介面需要調整
3:nginx我暫時是沒想到如何解決你說的問題。
『肆』 nginx 怎麼解決webservice跨域
下載Nginx
網路搜索Nginx,找到官網下載,如果是Linux系統,直接輸入下面命令即可下載
wget http://nginx.org/download/nginx-1.8.1.tar.gz
我們這里使用的是1.8.1版本
安裝Nginx
使用tar xvf nginx-1.8.1.tar.gz命令,解壓剛下載文件,得到一個nginx-1.8.1目錄。
進入nginx-1.8.1,執行./configure --prefix=/usr/local/nginx命令,表示將nginx安裝到/usr/local/nginx目錄下。
在使用make & make install命令正式安裝nginx,完成後就可以在/usr/local/nginx目錄下看到已經裝好的nginx了。
如果安裝許可權不夠,請使用sudo make install命令。
模擬跨域錯誤
啟動Nginx,並在Nginx的html目錄下,編寫一個ajax.html頁面,在裡面通過ajax方式請求taobao的ip地址查詢api。
在瀏覽器中訪問http://127.0.0.1/ajax.html,然後按F12即可在Console裡面看到跨域錯誤。
下面我們就通過Nginx來解決這種跨域問題。
『伍』 如何解決前端跨域問題
可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域,前端在帶有允許跨域的情況下,可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器,也可以在伺服器是設置代理,使用代理轉發請求。
『陸』 nginx怎麼修改跨域配置
通過add_header參數添加CORS跨域響應頭即可
Access-Control-Allow-Origin控制跨域源
Access-Control-Allow-Credentials控制是否帶cookie
Access-Control-Expose-Headers控制跨域拿到的一些額外欄位
『柒』 同源策略與跨域問題解決
如果兩個頁面的協議,埠(如果有指定)和域名都相同,則兩個頁面具有相同的 源 。
舉個例子:
下表給出了相對 http://a.bbb.com/dir/page.html 同源檢測的示例:
由同源策略導致的的AJAX請求失敗
例如:頁面路徑為: http://127.0.0.1:8848/fileTest/test.html
後台介面地址為: http://localhost:8080/sayHello
產生的結果:
此即為跨域請求失敗
CORS是一個W3C標准,全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源伺服器,發出 XMLHttpRequest 請求,從而克服了AJAX只能 同源 使用的限制。
在此之前,需要知道 簡單請求、復雜請求
簡單請求:
某些請求不會觸發 CORS 預檢請求 。本文稱這樣的請求為「簡單請求」,請注意,該術語並不屬於 Fetch (其中定義了 CORS)規范。若請求滿足所有下述條件,則該請求可視為「簡單請求」:
復雜請求:
與前述簡單請求不同,「需預檢的請求」要求必須首先使用 OPTIONS 方法發起一個預檢請求到伺服器,以獲知伺服器是否允許該實際請求。"預檢請求「的使用,可以避免跨域請求對伺服器的用戶數據產生未預期的影響。當請求滿足下述任一條件時,即應首先發送預檢請求:
若需要跨域,則需要在請求頭里添加 Origin 欄位
請求至後台若符合後台請求規則則可成功請求,並且後台會返回相應的規則
當請求為復雜請求時,瀏覽器會在請求前先發送一個 OPTIONS 請求
OPTIONS 是一個預檢請求,與簡單請求不同的是它會額外攜帶兩個參數: Access-Control-Request-Method :該次請求的請求方式 Access-Control-Request-Headers :該次請求的自定義請求頭欄位
OPTIONS 發送至後台若後台成功響應,則繼續發送復雜請求,若響應失敗則不會發送復雜請求
繼續發送復雜請求
(1)、OPTIONS不會攜帶body若後台方法上使用@RequestBody註解,則會報錯:
例如:
此時需要在@RequestBody後添加參數required=false,允許body為空
即可解決該問題
(2)、OPTIONS請求不應被過多的發送,因為它也是一個http請求也會佔用一部分資源,相應的一種解決方法
在響應中添加緩存欄位,以減少OPTIONS請求
(1)、在Java web工程中加如下列過濾器即可
(2)、在nginx中配置
使用反向代理工具解決跨域問題:如 Nginx 、 node.js
以Nginx為例:
在Nginx的配置文件中加入:
啟動Nginx再以
http://127.0.0.1/fileTest/test.html 地址訪問頁面
http://127.0.0.1/sayHello 訪問後台介面
發現可正常請求
上述以
http://127.0.0.1/fileTest/test.html 地址訪問頁面
http://127.0.0.1/sayHello 訪問後台介面
的方式遵循了,瀏覽器的同源策略自然不存在跨域
Nginx代理了頁面請求和介面請求,所以頁面請求和介面請求都在Nginx源內由Nginx去完成頁面請求和介面的請求即: http://127.0.0.1:80 內
所以瀏覽器訪問頁面和介面都是以 http://127.0.0.1:80 來進行訪問的,滿足了同源策略自然不存在跨域之說
圖解:
跨域:
Nginx代理,滿足同源策略
Nginx反向代理其實是一種欺騙瀏覽器的方法
[1] http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 瀏覽器同源政策及其規避方法
[2] http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html XMLHttpRequest Level 2 使用指南
[3] http://www.ruanyifeng.com/blog/2016/04/cors.html 跨域資源共享 CORS 詳解
[4] https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS HTTP訪問控制(CORS)