CORS跨域請求的限制與解決

CORS實現請求跨域

• CORS: 全稱"跨域資源共享"（Cross-origin resource sharing）

• CORS需要瀏覽器和服務器同時支持，纔可以實現跨域請求，目前幾乎所有瀏覽器都支持CORS，IE則不能低於IE10。CORS的整個過程都由瀏覽器自動完成，前端無需做任何設置，跟平時發送ajax請求並無差異。so，實現CORS的關鍵在於服務器，只要服務器實現CORS接口，就可以實現跨域通信。

CORS的作用

1. 調用XMLHttpRequest或fetchAPI通過跨站點方式訪問資源
2. 網絡字體，例如Bootstrap（通過CSS使用@font-face 跨域調用字體）
3. 通過canvas標籤，繪製圖表和視頻。

1.什麼是跨域？

• 跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

• 同源策略：是指協議，域名，端口都要相同，其中有一個不同都會產生跨域

2.跨域訪問示例

假設有兩個網站，A網站部署在：http://localhost:81 即本地ip端口81上；B網站部署在：http://localhost:82 即本地ip端口82上。
現在A網站的頁面想去訪問B網站的信息，A網站頁面的代碼如下（這裏使用jquery的異步請求）

$(function (){

    $.get("http://localhost:82/api/values", {},function (result) {

          $("#show").html(result);

  })})；

3.如何解決跨域問題？

首先我們用nginx作爲代理服務器和用戶交互，這樣用戶就只需要在80端口上進行交互就可以了，這樣就避免了跨域問題，因爲我們都是在80端口上進行交互的；

server {
        listen       80; #監聽80端口，可以改成其他端口
        server_name  localhost; # 當前服務的域名
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
		location /apis { #添加訪問目錄爲/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:82;
       }

1.當用戶發送localhost:80/時會被nginx轉發到http://localhost:81服務；
2.當界面請求接口數據時，只要以/apis 爲開頭，就會被nginx轉發到後端接口服務器上；

總結：nginx實現跨域的原理，實際就是把web項目和後端接口項目放到一個域中，這樣就不存在跨域問題，然後根據請求地址去請求不同服務器（真正幹活的服務器）；