如何解決跨域問題

解決跨域三種方法

什麼是跨域，爲何要解決跨域。根據瀏覽器的同源策略。當瀏覽器不能響應執行網站的腳本時候，首先想到第一個問題點是否存在跨域問題。就是所謂同源策略，何爲同源就咱們常常上網是經過網址訪問網站。而網址就由 www(協議)，子域名 、主域名，加端口號組成。當訪問的地址的這幾個部分不一樣就會產生跨域。一般因爲端口的不一樣形成跨域問題。瀏覽器同源策略根據安全考慮。解決跨域問題有三種方法。包括有jsonp(只侷限於get請求方式)、nginx配置代理模式、服務器端跨域共享CORS。
  1、jsonp解決跨域是javascript代理模式，它是實現原理是經過動態在Html頁面中插入<script>標籤,在發送帶網址的請求，但只適用get請求。
  例如jquery實現方式

/**jquery實現方式/
$.ajax({
url:'http://www.xxx.com/login',
type:'GET',
dataType:'jsonp',//請求方式爲jsonp
jsonpCallback:'callback',
})
function callback(res) {
console.log(res);
}

2、nignx反向配置域名、端口

實現原理：
既然瀏覽器有同源策略規則，也屬於一種安全策略，咱們就必須規則。可是它不是http的一部分。咱們只須要使用nginx配置一可使用地址。這個地址對於服務器端能代理端口，而原理本地址無需改變，瀏覽器訪問使用代理的地址。也能夠訪問到服務。

具體配置：

#proxy服務器

server {

listen      81;

server_name  www.domain1.com;

location / {

    proxy_pass  http://www.domain2.com:8080;  #反向代理這是代理地址
    proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裏域名
    index  index.html index.htm;
    # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啓用
    #add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端只跨域不帶cookie時，可爲*
    add_header Access-Control-Allow-Credentials true;

}

}

3、CORS跨域
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。 它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限。有三種請求凡是head、get、post。根據複雜程度→分簡單請求和複雜請求。
（1）簡單請求
一、 請求方法是如下三種方法之一：
HEAD
GET
POST
二、HTTP的頭信息不超出如下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
若是同時知足上面這兩個條件就複雜請求。

對解決簡單請求的跨域：
    <script>
    var url = 'http://www.lishanlei.cn/CorsTest/CorsTest.php';
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    // xhr.setRequestHeader('X-Custom-Header', 'value');
    xhr.send();
    </script>
    注意若在設置header時候帶有原始Orign字段，說明是一種跨域請求。
對解決複雜請求的跨域：
 方法步驟複雜這裏大概步驟不具體分析服務器端處理機制

服務器對於跨域請求的處理流程以下：

首先查看http頭部有無origin字段；
若是沒有，或者不容許，當成普通請求；
若是有且是容許的，再看是不是preflight(method=OPTIONS);
若是不是preflight(簡單請求)，返回Allow-Origin,Allow-Credential等字段，並返回正常內容；
若是是preflight(非簡單請求)，返回Allow-Headers,Allow-Methods等；
配置CORS規則
apache上配置CORS規則
Apache須要使用mod_headers模塊來激活HTTP頭設置，默認是激活的，只須要修改Apache配置文件中的/etc/apache2/sites-available/000-default.conf
1 開啓模塊
sudo a2enmod headers
2 編輯配置文件
sudo vi /etc/apache2/sites-available/000-default.conf
3 在虛擬主機Directory設置下添加
Header set Access-Control-Allow-Origin *

總結：
除了上面提到三種跨域請求外，還有其餘許多解決跨域方法
好比window.name + iframe 、location.hash + iframe等幾種不一樣的方式，上面三種比較通用方式。