nginx實現跨域訪問
跨域概念
簡單來說:兩個url只要協議、域名、埠有任何一個不同,都被當作是不同的域,相互訪問就會有跨域問題。
案例
例如:在開發前後端完全分離的系統中,服務端程式碼屬於一個工程,前端程式碼屬於另一個工程,前端開發人員在進行介面對接時,可能會在webstorm等工具進行編碼,並用webstorm的內建伺服器進行除錯,這就會有跨域問題,因為,webstorm內建伺服器預設字首部分是http://localhost:63342/,而服務端介面的路徑字首部分一定不會是這樣,這樣便產生了跨域訪問的問題。
案例程式碼
$(function(){ $.ajax({ url: "http://localhost:8888/ssm/interfaces/test/m006", type: "POST", async: false, dataType: "json", contentType: "application/json", cache: false, data: JSON.stringify({ "id": "bgdsdgs", "name": "name", "email": "
[email protected]", "voModel2": [{ "id": "[email protected]", "v3": {"id":"sdfghjkl"} }] }), success: function(data) { $("#text").html(JSON.stringify(data)); }, error: function(text) { $("text").html(JSON.stringify(text)) } })
直接訪問,開啟瀏覽器的控制檯檢視,沒錯,提示的正是無法進行跨域訪問。
1、要解決這個問題很簡單,只要使頁面的字首和介面的字首一致就可以了,因此可以使用nginx進行反向代理。開啟nginx目錄下的conf資料夾,在nginx.conf檔案的配置如下
#預設監聽80埠,ip後面不加埠號預設就是80 listen 80; #伺服器地址 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; #專案根目錄,一般就是啟動頁 location / { #專案所在目錄 root C:\Users\shengmengqi\WebstormProjects\angularJsFrame; #假設across-domain.html的首頁,如果之後頁面中跳轉也是基於http://localhost/跳轉 index across-domain.html; } #作用:訪問的http://localhost/ssm/interfaces/相當於一個代理url,實際訪問的 是http://localhost:8888/ssm/interfaces/ location /ssm/interfaces/{ proxy_pass http://localhost:8888/ssm/interfaces/; }
2、配置完畢,將ajax中的介面路徑改為http://localhost/ssm/interfaces/test/m006,將ngnix啟動起來,在工作管理員中是否有nginx程序,有的話說明啟動成功,如果沒有,可以檢視nginx目錄下log資料夾中的error.log,看哪裡有問題進行修改,啟動成功後,在瀏覽器位址列直接訪問localhost,這次結果就正確了。
這次的請求其實是走了nginx代理伺服器的
總結
nginx的實際原理就是配置一個代理路徑替換實際的訪問路徑,使得瀏覽器認為訪問的資源都是屬於相同協議,域名和埠的,而實際訪問的並不是代理路徑,而是通過代理路徑找到實際路徑進行訪問,所以,不妨將nginx看作是給瀏覽器的一種障眼法好了,哈哈~
相關推薦
nginx實現跨域訪問
跨域概念 簡單來說:兩個url只要協議、域名、埠有任何一個不同,都被當作是不同的域,相互訪問就會有跨域問題。 案例 例如:在開發前後端完全分離的系統中,服務端程式碼屬於一個工程,前端程式碼屬於另一個工程,前端開發人員在進行介面對接時,可能會在webst
JSON和JSONP,原來ajax引用這個來實現跨域訪問的
第一個 下午 想要 進行 ava 客戶 als rep web客戶端 由於Sencha Touch 2這種開發模式的特性,基本決定了它原生的數據交互行為幾乎只能通過AJAX來實現。 當然了,通過調用強大的PhoneGap插件然後打包,你可以實現100%的Socket通訊和本
js實現跨域訪問的幾種方式
bsp 設置 參數 script quest detail XML url 訪問 不同域:協議,域名,端口任何一個不同; 1,jsonp跨域 在js中,我們直接使用XMLHttpRequest請求不同的域上的數據時,是不可以的。但是,在頁面上引用不同域上的js腳本文件確實可
nginx 實現跨域
session add pre err pan gpo true cookie tro nginx 添加頭部跨域。 location / { add_header ‘Access-Control-Allow-Origin‘ ‘*‘; //允許的域 ad
Jsonp實現跨域訪問
turn latest dumps 填充 -c meta index itl add 同源策略 同源策略(Same origin policy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源
SpringMVC+RestFul詳細示例實戰教程(實現跨域訪問)
java springmvc restful 跨域 一、理解 REST REST(Representational State Transfer),中文翻譯叫“表述性狀態轉移”。是 Roy Thomas Fielding 在他2000年的博士論文中提出的。它與傳統的 SOAP Web 服務區別
SpringBoot裡的CORS 實現跨域訪問
專案需求要前後端分離,用RESTful介面的形式呼叫服務,這個時候就出現了跨域訪問的問題, 想了兩種方案, 一種是ajax 的jsonp的形式來解決但是有侷限性,以下是網上找的比較形象的介紹: JSONP的基本原理即是:利用HTML的<script>標籤可獲取任何來源Ja
Nginx配置跨域訪問
由於瀏覽器同源策略的存在使得一個源中載入來自其它源中資源的行為受到了限制。即會出現跨域請求禁止。 通俗一點說就是如果存在協議、域名、埠或者子域名不同服務端,或一者為IP地址,一者為域名地址(在跨域問題上,域僅僅是通過"url的首部"來識別而不會去嘗試判斷相同的IP地址對應著兩個域或者兩個
ajax 設定Access-Control-Allow-Origin實現跨域訪問
ajax跨域訪問是一個老問題了,解決方法很多,比較常用的是JSONP方法,JSONP方法是一種非官方方法,而且這種方法只支援GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type設為POST,也會自動變為GET。 官方問題說明: “scrip
通過jsonp來實現跨域訪問獲取資料!!!
通過jsonp來實現跨域訪問獲取資料的原理是什麼?通俗一點就是通過<script src="你要訪問的連結" type="text/javascript"></script>中的src來訪問你想要獲取資料的網址,並獲取資料。(不要問這啥這樣做就可以,
關於jsonp實現跨域訪問,以及存在的安全問題
jsonp跨域訪問的實現 關於jsonp實現跨域訪問相關知識,請看某位大佬這篇博文,雖然是2012年寫的老文章了,但是對於新手來說寫滴是相當不錯:深入淺出JSONP–解決ajax跨域問題 jsonp可能導致的安全問題 瞭解了jsonp之後,大家應該也都
angularJS通過jsonp實現跨域訪問
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/ang
Nginx允許跨域訪問的配置問題
如今前後端分離的模式,越來越成為很多團隊的選擇,通過分離前後端的工作,是的雙方更能關注於自己核心的工作領域,只需要通過相應的API介面進行互動。 前後端工作的分離帶來的一個問題就是前後端在部署上分離的可能性,在部署上的分離又會觸發瀏覽器安全機制——同源策略,從而導致不能訪
nginx允許跨域訪問
1瀏覽器是禁止跨域訪問: 不安全,容易造成csrf攻擊: 使用者訪問正常網站,被其他網站劫持,返回帶有訪問這個網站的請求,帶著cookie去訪問這個網站。 nginx: Acc
[jQuery]Ajax實現跨域訪問JSON
Ajax跨域訪問JSON 環境:.net4.0+jQuery+JSON.net 因為在跨域實現,所以這裡新建網站,這個網站只需要Ashx檔案 public void ProcessRequest(HttpContext context) { stringstrJs
Ajax通過jsonp實現跨域訪問,訪問成功但走error不走success的的問題解決
前提 最近工作中有個需求就是JS實現跨域訪問,眾所周知JS不能實現跨域訪問,但是”script”標籤卻可以,這是Jsonp實現的原理,這裡就不多講了,這裡主要講ajax通過Jsonp跨域訪問雖然返回200但總是走error不走success的解決方案
Vue2.0使用Axios實現跨域訪問
Vue2.0使用Axios實現跨域訪問 配置BaseUrl 在main.js中,配置下我們訪問的Url字首: axios.defaults.baseURL = '/api' // 開發本地代理 axios.defaults.headers.post['Contenst-
通過document.domain實現跨域訪問
對於已經有成熟產品體系的公司來說,不同的頁面可能放在不同的伺服器上,這些伺服器域名不同,但是擁有相同的上級域名,比如id.qq.com、www.qq.com、user.qzone.qq.com,它們都有公共的上級域名qq.com。這些伺服器上的頁面之間的跨域訪問可以通過d
Servlet作為代理實現跨域訪問
就是在前臺中呼叫proxy程式的servlet,設定引數servletName和其它引數。代理程式會將該請求傳送到目的地址的名稱為servletName的servlet中去,並將其它引數作為請求的引數,在得到結果後,將內容原樣輸出到請求頁面。 impo
[Access-Control-Allow-Origin]Web中使用filter實現跨域訪問問題
web.xml配置過濾器 在web.xml中定義一個isCross初始化變數,用於開啟是否允許跨域訪問。這將很好的控制跨域訪問問題。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-