一、介紹

CORS 是一個 W3C 標準，全稱是“跨源資源共享”（Cross-origin resource sharing），或者通俗地

稱為“跨域資源共享”。它允許瀏覽器向跨源的服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服AJAX

只能同源使用的限制。

二、為什么會出現(xiàn)跨域問題

為了保證用戶信息的安全，所有的瀏覽器都遵循同源策略。

所謂同源是指"協(xié)議+域名+端口"三者都相同，有任何一個不同時，瀏覽器都視為非同源。

當你向非同源的服務(wù)器發(fā)起網(wǎng)絡(luò)請求的時候，這個請求就是跨域了。

舉例來說，http://www.example.com/dir/page.html這個網(wǎng)址，協(xié)議是http://，域名是www.example.com，端口是80（默認端口可以省略），dir/page.html是請求資源。它的同源情況：

• http://www.example.com/dir2/other.html：同源（同一域名）
• http://example.com/dir/other.html：不同源（域名不同）
• http://v2.www.example.com/dir/other.html：不同源（域名不同）
• http://www.example.com:81/dir/other.html：不同源（端口不同）
• https://www.example.com/dir/page.html：不同源（協(xié)議不同）

注：我們在使用postman等工具模擬發(fā)起http請求的時候，不會遇到跨域的情況。

三、兩種請求

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。瀏覽器對這兩種請求的處理是不一樣的。

只要同時滿足以下兩大條件，就屬于簡單請求。否則屬于非簡單請求。

（1）請求方法是以下三種方法之一。

• HEAD
• GET
• POST

（2）HTTP的頭信息不超出以下幾種字段。

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

1、簡單請求

當瀏覽器判定某個跨域請求是簡單請求時，會在請求頭信息之中，自動增加一個Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的頭信息中，Origin字段用來說明，本次請求來自哪個源（協(xié)議 + 域名 + 端口）。服務(wù)器根據(jù)這個值，決定是否同意這次請求。

如果Origin指定的源，不在許可范圍內(nèi)，服務(wù)器會返回一個正常的HTTP回應(yīng)。瀏覽器發(fā)現(xiàn)，這個回應(yīng)的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。注意，這種錯誤無法通過狀態(tài)碼識別，因為HTTP回應(yīng)的狀態(tài)碼有可能是200。

如果Origin指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會多出幾個頭信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

·Access-Control-Allow-Origin

該字段是必須的。它的值要么是請求時Origin字段值，要么是一個*，表示接受任意域名的請求。

2、非簡單請求

非簡單請求是那種對服務(wù)器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

非簡單請求會在正式通信之前，增加一次HTTP查詢請求，稱為“預(yù)檢”請求（preflight）。

瀏覽器先詢問服務(wù)器，當前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會發(fā)出正式的XMLHttpRequest請求，否則就報錯。

2.1?預(yù)檢請求

下面是這個“預(yù)檢”請求的HTTP頭信息。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

“預(yù)檢”請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息里面，關(guān)鍵字段是Origin，表示請求來自哪個源。

除了Origin字段，“預(yù)檢”請求的頭信息包括兩個特殊字段。

（1）Access-Control-Request-Method

該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發(fā)送的頭信息字段，上例是X-Custom-Header。

2.2?預(yù)檢請求的回應(yīng)

服務(wù)器收到“預(yù)檢”請求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認允許跨源請求，就可以做出回應(yīng)。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回應(yīng)中，關(guān)鍵的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以請求數(shù)據(jù)。該字段也可以設(shè)為星號，表示同意任意跨源請求。

Access-Control-Allow-Origin: *

如果服務(wù)器否定了“預(yù)檢”請求，會返回一個正常的HTTP回應(yīng)，但是沒有任何CORS相關(guān)的頭信息字段。這時，瀏覽器就會認定，服務(wù)器不同意預(yù)檢請求，因此觸發(fā)一個錯誤，被XMLHttpRequest對象的onerror回調(diào)函數(shù)捕獲?？刂婆_會打印出如下的報錯信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

一旦服務(wù)器通過了“預(yù)檢”請求，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務(wù)器的回應(yīng)，也都會有一個Access-Control-Allow-Origin頭信息字段。

四、跨域解決方案

（1）后端那邊幫忙加上了一個 header：Access-Control-Allow-Origin: *，代表來自任何 origin 的網(wǎng)站都可以用 AJAX 存取這個資源。

后端代碼如下：

app.get('/', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.json({
    data: db.getFormOptions(),
  })
})

更多情況：CORS 完全手冊（三）：CORS 詳解 - Huli's blog

?

（2）Vue腳手架Vue-Cli3.x 使用proxy代理方案

瀏覽器是禁止跨域的，但是服務(wù)端不禁止，在本地運行npm run dev等命令時實際上是用node運行了一個webpack開發(fā)服務(wù)器，因此proxyTable實際上是將請求發(fā)給自己的服務(wù)器，再由服務(wù)器轉(zhuǎn)發(fā)給后臺服務(wù)器，亦做了代理轉(zhuǎn)發(fā)，因此不會出現(xiàn)跨域問題。

可以在根目錄下建立一個vue.config.js的文件：

module.exports = {
  devServer: {
    // https://www.baidu.com/company/getall
    proxy: {    // 配置跨域
      '/api': {    // 請求相對路徑以/api開頭的, 才會走這里的配置
        target: 'https://www.baidu.com/',    // 需要代理的地址
        secure: false,    // 如果是不是https接口，可以不配置這個參數(shù)
        changeOrigin: true,    // 允許跨域
        pathRewrite: {
          '^/api': '', // 路徑重寫，將前綴/apis轉(zhuǎn)為"/"，也可以理解為"/apis"代替target里面的地址
          // 如果本身的接口地址就有"/api"這種通用前綴，也就是說https://www.exaple.com/api，就可以把pathRewrite刪掉，如果沒有則加上
        },
      },
    },
  },
};

axios請求的代碼：

axios({
    url: '/api/company/getall'
})

參考：

JavaScript CORS通信_w3cschool文章來源地址http://www.zghlxwxcb.cn/news/detail-481867.html

到了這里，關(guān)于前端跨域解決方案之CORS詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！