前後端分離之--跨域問題

隨着前後端分離開發的火熱，越來越多的人在開發中遇到了“跨域”問題，導致項目無法進行，本章就教大家如何解決跨域問題，希望對大家有所幫助。    

跨域產生原因

    首先來看一下“跨域”問題的產生的原因，其實“跨域”是瀏覽器出於安全方面考慮作出的限制，如果不在同一域名下訪問接口的話就會產生跨域問題；一般ajax請求如果因爲跨域問題報錯的話一般如下的報錯：

post request is No 'Access-Control-Allow-Origin' header is present on the requested resource.'   

   如果看到下面的報錯，那你肯定是跨域訪問了。

跨域參考場景如下

http://www.baidu.com/api/
                                                 同一域名不通路徑  允許通訊
http://www.baidu.com/

http://www.baidu.com:8090/api/
                                                   同一域名不同端口  不允許通訊
http://www.baidu.com/

https://www.baidu.com/api/
                                                   同一域名不同協議  不允許通訊
http://www.baidu.com/

http://www.baidu.com/api/
                                                  同一域名 不通子域名  不允許通訊
http://shop.baidu.com/

 

http://www.baidu.com/api/
                                                  不同域名  不允許通訊
http://www.sina.com/

如何解決跨域問題？

    那麼跨域問題如何避免如何解決呢？其實解決辦法也很簡單，

1 同源

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

 

2 代理

代理的原理如下圖

 我們使用的代理服務器一般可以選用Node或者nginx，前者一般在開發中使用，nginx則是一般在生產環境中使用，至於他們的使用方法可以參考我的博客  傳送門

3 後臺設置

開發中解決跨域問題最簡單有效的方式往往是後臺響應時設置請求頭權限，具體如下

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Methods:POST,GET");

不同的後臺語言設置響應頭的方式不通，但是大同小異，具體語法自行百度即可 

4 jsonp

注意：jsonp只支持get訪問，一般不太實用

ajax的具體實現方式如下

$.ajax({
    url: 'http://www.test.com/api/',
    type: 'get',
    dataType: 'jsonp',  // 請求方式
    jsonpCallback: "callback",    // 回調函數名稱
    data: {}
});

vue的實現方式

this.$http.jsonp('https://www.baidu.com/api/', {
    params: {"name","張三"}, //參數
    jsonp: 'callback' //回調函數名稱
}).then((res) => {
    console.log(res); 
})