js跨域訪問問題

什么是跨域訪問

這里說的js跨域是指通過js在不同的域之間進行數據傳輸或通信，比如用ajax向一個不同的域請求數據，或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同，都被當作是不同的域。如果進行跨域訪問，瀏覽器會報跨域訪問異常

NO ‘Access Control-Allow-Origin‘ ....
CORS:Cross-orign resource sharing跨域分享資源

總之，當前頁面你發送請求時只要協議、域名、端口號有一個與當前頁面不一致都屬於跨域訪問。

 

后端解決方法

在Controller層的處理器上解決

后端解決方式一

//解決方法一：http://localhost:9105也可設置為*，表示那個域可以進行跨域訪問，但是*號不能用cookie,允許訪問的域 response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105"); //----如果用了cookie信息-----，必須加后面這句話，如果不用cookie可以不加這句話 response.setHeader("Access-Control-Allow-Credentials", "true");

后端解決方式二

//解決方法二：在處理器方法上加注解，allowCredentials="true"，默認為false @CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

在端口號為9105的web前端也要處理，以AngularJS為例，在Service.js中添加如下內容{‘withCredentials‘:true}

//而且客戶端的請求也需要加參數{‘withCredentials‘:true} ) $http.get(‘http://localhost:9107/cart/addItemToCartList.do?itemId=‘+?+‘&num=‘+? ,{‘withCredentials‘:true} ).success.....

 

服務器反向代理

1、nginx反向代理解決跨域問題，找到nginx的配置文件“nginx.conf”，修改一下信息：

server {
    server_name_in_redirect off;
    location / {
        # 將下面的模板改為修改為你的項目地址 # alias /path/to/your/project/; alias /home/myProject/firmwareDepthAnalysisAndDetection/; //這是我的地址 } location /api { rewrite /api/(.+)$ /$1 break; proxy_pass http://10.10.2.254:8080; //這里寫自己要訪問的接口api } }

2、使用node.js實現反向代理，選用安裝http-proxy模塊

npm install http-proxy

代碼：

// 導入http模塊 var http = require('http'); // 導入http-proxy模塊 var httpProxy = require('http-proxy'); // 提供服務的端口號 var PORT = 1234; // 創建反向代理服務 var proxy = httpProxy.createProxyServer(); // 監聽錯誤事件 proxy.on('error', function (err, req, res) { // 輸出空白響應數據 res.write('error!'); res.end(); }); // 創建服務 var app = http.createServer(function (req, res) { // 執行反向代理 proxy.web(req, res, { // 目標地址 target: 'http://localhost:8080' }); }); // 啟動服務 app.listen(PORT, function () { console.log('server is running at %d', PORT); });

總結：創建了一個提供反向代理功能的服務器，該服務器啟動后監聽1234端口，接收到請求之后，將請求轉發至目標地址（target）

資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

JSONP

JSONP 是 JSON with padding（填充式 JSON 或參數式 JSON）的簡寫。JSONP實現跨域請求的原理簡單的說，就是動態創建<script>標簽，然后利用<script>的src 不受同源策略約束來跨域獲取數據。

JSONP 由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而數據就是傳入回調函數中的 JSON 數據。

JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便，但是也存在一些問題： 
首先， JSONP 是從其他域中加載代碼執行。如果其他域不安全，很可能會在響應中夾帶一些惡意代碼，而此時除了完全放棄 JSONP 調用之外，沒有辦法追究。因此在使用不是你自己運維的 Web 服務時，一定得保證它安全可靠。

其次，要確定 JSONP 請求是否失敗並不容易。雖然 html5 給<script>元素新增了一個 onerror事件處理程序，但目前還沒有得到任何瀏覽器支持。為此，開發人員不得不使用計時器檢測指定時間內是否接收到了響應。