先後端分離產生的跨域問題的解決方案之--jsonp、nginx代理、設置頭信息等

前言

在先後端沒有分離的時候，前端開發要麼是寫靜態頁面，數據渲染後端來作，要麼就是前端的頁面和後端的代碼剛開始的時候就合併在一塊兒，每次後端代碼更新了以後，前端也要更新一下代碼，而後重啓一下服務，仍是比較麻煩的，並且前端要一直依賴於後端來開發。但先後端分離以後就不同了，前端有更大的自由發揮性，如今應該絕大部分的公司都已經採起這種開發模式了。
先後端分離開發以後先後端只要定好接口文檔，而後就根據文檔各自開始開發了，在接口沒好以前前端也可使用模擬數據的插件來作接口數據模擬返回，等到後端接口寫好以後再進行聯調就行了，這樣子又爲開發大大的節約了時間。
先後端爲咱們帶來那麼大的便利，但也有它隨之而來的缺點，那就是在項目開發時去請求同事的服務，因爲瀏覽器同源策略的影響，就會出現跨域問題而沒法收到後端接口返回的數據。

那麼何種狀況下算跨域了呢？

• 對比網址 http://baidu.com/a.html

  • http://www.qq.com/a.html ----- 域名不一樣
  • http://www.baidu.com:8080/a.html ----- 端口不一樣
  • http://baike.baidu.com/a.html ----- 子域不一樣
  • https://baidu.com/a.html ----- 協議不一樣

跨域以後會形成

咱們使用ajax去請求資源的時候，就會被使用同源策略進行檢測，注意：同源策略是適用於瀏覽器的，也就是說若是咱們發送了一個跨域的請求，服務器是能接收到請求的，也會把請求的數據返回給你，但瀏覽器在接收數據以後，會比較他們的域是否相同，若是不相同拒絕接收處理。

解決方案

1:後端代理
1.1 vue裏的後端代理
在config文件下的index.js文件下配置：

proxyTable: {
    'api':{//將'http://www.test.com:8001/'映射爲'api'
        target:'http://www.test.com:8001/',// 接口域名
        changeOrigin: true,//是否跨域
        pathRewrite: {
            '^/apis': ''   //須要rewrite的,
        } 
    },
}

1.1 nginx代理
找到nginx裏conf下的配置文件nginx.conf，進行如下的修改

server {
    listen       80; #監聽80端口，能夠改爲其餘端口
    server_name  127.0.0.1; # 當前服務的域名

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location ^~/ {
        proxy_pass http://127.0.0.1:4302; #頁面訪問地址
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header Host $http_host;
    }

    location ^~/hs {
        proxy_pass http://10.65.7.114:8180/hs; #實際請求的接口配置
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header Host $http_host;
    }
}

注：在location裏面配置頁面的訪問地址和要請求的接口地址。

2:jsonp請求
原理：咱們會發現咱們用script來引入文件的時候，地址不受同源策略的影響
2.1原生js解決跨域

<script>
    function callback(res){
        console.log(res.name);
    }
</script>
<script src="http://www.baidu.com/api.do?callback=callback"></script>

2.2用juery封裝好的jsnop請求來解決跨域

$.ajax({
    url: "http://www.baidu.com/api.do",
    type: "GET",
    dataType: "jsonp", //指定服務器返回的數據類型
    success: function (res) {
       console.log(res);
    }
});

jsonp請求的缺點就是它只能發送get請求，有上傳文件之類的需求就不適合用。

3：設置頭信息方案
js 端的ajax請求：

$.ajax({
    url:'http://test.html',
    dataType:'json',
    type:'GET',
    beforeSend:function(xhr){
        xhr.setRequestHeader('Test','testheadervalue');
    },
    async: false,
    cache: false,
    success: function (res) {}
})

服務端設置：

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

/**表示的是訪問服務端的ip地址及端口號，設置爲*表示全部域均可以經過,通常來講不設置*,由於安全性能差，因此改爲*/--->HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://10.80.6.111:8080");

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");

/**表示的是容許跨域的請求方法；*/

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Test");

/**表示的是容許跨域請求包含content-type頭；*/