什麼是跨域訪問

這裡說的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事件處理程式，但目前還沒有得到任何瀏覽器支援。為此，開發人員不得不使用計時器檢測指定時間內是否接收到了響應。