前言
首先簡單的說一下什么是跨域
- 跨域首先是出現(xiàn)在瀏覽器里的往堡，也就是瀏覽器攔截了跨域請求洛搀。
- 跨域所跨的域（domain）一般來說指：當前要發(fā)出的請求其域（協(xié)議 + ip地址 + 端口）與本應用的不一樣棠耕。
本篇只總結了筆者個人所使用過的 2 種經(jīng)驗舶沛，至少也是我認為正確的結論分享在此篇席函。
目錄
- 配置 proxy 解決跨域
- 配置白名單解決跨域
配置 proxy
首先說一下 proxy 的原理就像其單詞是一樣的还绘，因為跨域請求攔截是瀏覽器的行為楚昭，而并非服務器的行為，因此拍顷，可以嘗試通過另一種方式發(fā)送請求抚太，比如讓 一個可請求的中間服務代為發(fā)送請求。
作為本篇的主角 vue昔案，cli 3.x 構建的項目一般需要一個 vue.config.js 文件來配合實現(xiàn) proxy 的功能尿贫。
1. 創(chuàng)建 vue.config.js
在 package.json 文件同級目錄下，創(chuàng)建 vue.config.js 配置文件（如果已經(jīng)有了當然就不用創(chuàng)建了）踏揣。
2. 修改 vue.config.js
主要就是 proxy 里面的東西庆亡，其實都可以直接復制，修改一下 target 為實際要請求的地址即可
module.exports = {
publicPath: '/',
outputDir: 'dist',
devServer: {
open: true,
host: 'localhost',
port: '8081',
proxy: {
'/api': {
target: 'http://localhost:8082', // 要請求的地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
3. axios 使用 proxy
這里的話其實就是注意以下 url 或者說路徑就可以了捞稿，例如我要用 post 請求 http://localhost:8082/students又谋，這個時候我們就可以這么寫：
axios
.post("/api/students")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
這里這個 /api 就等價于 http://localhost:8082，但最終會被替換為 http://localhost:8081/api/students（我啟動的 vue 項目是 8081）
本例子只是為了實驗 post 而故意迎合娱局，實際開發(fā)中建議 post 做 add 使用
proxy 模式搂根，筆者研究的時間不夠長，發(fā)布后經(jīng)常會出現(xiàn) 404 的問題铃辖，雖說可以查閱到一些相關資料剩愧，但并不是很實用的感覺；總的來說娇斩， proxy 模式可能目前在我看來是更偏向于開發(fā)期間所使用
配置白名單
該方案也很直白仁卷，就是把允許訪問的站點配置一下，讓他作為可信站點即可犬第。
這通常與 Access-Control-Allow-Origin 聯(lián)系緊密锦积。
采用這種方案不需要前端做什么，只需要配置一下后端服務即可歉嗓。
我們用一個 express 的項目為例：
./routes
├── ./routes/index.js
├── ./routes/students.js
└── ./routes/users.js
假如我要給 users.js 這個路由設置白名單丰介，只需要添加一個 router.all 即可
var express = require('express');
var router = express.Router();
router.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:8081');
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
res.header('X-Powered-By', ' 3.2.1');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send(
JSON.stringify([
{ name: '諸葛亮', gender: '男' },
{ name: '貂蟬', gender: '女' },
{ name: '孫策', gender: '男' }
])
);
});
module.exports = router;
Access-Control-Allow-Origin 后面的 http://localhost:8081 就是受信任的站點
如此，該站點就可以訪問此路由了。
