vue如何解決跨域

1. 什么是跨域

• 跨域本質是瀏覽器的一種給予同源策略的安全手段，是瀏覽器最核心的安全功能
• 所謂同源就是要protocol協議相同，host主機相同哥port端口相同
• 反之就是非同源，也就是跨域
• 跨域的結果就是瀏覽器拿不到數據

2. 如何解決

2.1 CROS（Cross-Origin Resource Sharing，跨域資源共享）

• CROS是一個系統，他由一系列傳輸的HTTP頭組成，這些HTTP頭決定瀏覽器是否阻止前端JS代碼獲取跨域請求的響應
• CROS實現起來非常方便，只需要增加一些HTTP頭，讓服務器能聲明允許的訪問來源，只要后端實現了CROS，就實現了跨域
• 我們可以設置response的HTTP頭

// 設置允許的源（Origin），* 表示接受所有域的請求
response.setHeader("Access-Control-Allow-Origin", "*");
// 設置允許的HTTP方法（如GET, POST等）
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
// 設置允許的頭部信息
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
// 預檢請求的緩存時間
response.setHeader("Access-Control-Max-Age", "3600");
// 是否支持憑證（cookies、HTTP認證等）
response.setHeader("Access-Control-Allow-Credentials", "true");

2.2 Proxy

2.2.1 使用webpack proxy

• 就是找一個中間人作為代理，比如我們在使用webpack時，通過proxy實現代理
• 具體看這篇文章
  一文大白話講清楚webpack進階——11——webpack proxy工作原理
• 但是只限于開發環境，如果生產環境還不不同源，那還是存在跨域問題

2.2.2 服務端代理轉發

• 以express為例，利用中間件，實現代理轉發

const express=require('express')
const proxy=require('http-proxy-middleware')
const app=express()
app.use('api/',proxy({target:'http：//localhost:8080',changeOrigin:false
}))

2.2.3 通過nginx實現代理

server {listen 80;# server_name www.josephxia.com;location / {root /var/www/html;index index.html index.htm;try_files $uri $uri/ /index.html;}location /api {proxy_pass http://127.0.0.1:3000;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}