為什么要做代理配置劲藐？
前端開發(fā)中經(jīng)常會(huì)遇到跨域的問(wèn)題，特別是在開發(fā)環(huán)境碍扔，本地開發(fā)請(qǐng)求后臺(tái)接口瘩燥，因?yàn)榍岸朔?wù)和后臺(tái)服務(wù)不是同一臺(tái)電腦所以會(huì)出現(xiàn)跨域的現(xiàn)象，也就是遵循我們的同源策略不同，即協(xié)議厉膀，域名，端口不一致時(shí)就會(huì)出現(xiàn)跨域的現(xiàn)象二拐， 此時(shí)在我們本地調(diào)試程序久需要驚醒代理配置服鹅，我用的angular框架做開發(fā)，所以本文圍繞angular
如下圖百新，我是用express配置了一個(gè)接口
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.post('/api/home', function(req, res, next) {
res.send("登陸成功");
});
router.post('/auth', function(req, res, next) {
res.send("登陸成功");
});
module.exports = router;
然后在不做任何操作的情況下請(qǐng)求這個(gè)/auth的這個(gè)接口企软，接口的全稱應(yīng)該是192.168.1.109:8888/auth
結(jié)果會(huì)報(bào)錯(cuò)，如下圖
因?yàn)槲襛ngular項(xiàng)目的服務(wù)為http://192.168.1.109:4201/#/home饭望，雖然是同一臺(tái)電腦仗哨，但是端口不一樣也會(huì)存在跨域的問(wèn)題
新建JSON配置文件設(shè)置代理配置
在項(xiàng)目的根目錄新建JSON文件
{
"/":{
"target":"http://192.168.1.109:8888",
"secure":false,
"changeOrigin":true
}
}
- target: 請(qǐng)求目標(biāo)服務(wù)地址
- secure：為false時(shí)热凹，允許不是https和安全證書無(wú)效的服務(wù)
- changeOrigin：為true 柿祈，允許請(qǐng)求跨域
配置好了，要在pageage.json文件中添加服務(wù)啟動(dòng)時(shí)同時(shí)啟動(dòng)代理文件
配置好了后，npm start啟動(dòng)項(xiàng)目芜繁，請(qǐng)求成功
如果想代理多個(gè)路徑怎静，可以換一種方式配置捌蚊，加了個(gè)context參數(shù)
{
"context":["/auth","/api"],
"target":"http://192.168.1.109:8888",
"secure":false,
"changeOrigin":true
}
此配置可以代理接口地址為“/auth”和“/api”開頭路徑的服務(wù)审姓，以上方法是用json文件配置代理的，還可以用ES6模塊化的方式配置
用ES6模塊化方式配置代理
同樣在項(xiàng)目的根目錄新建一個(gè)proxy.config,js文件旨椒，此文件是js文件
和json文件同樣配置,此時(shí)不在贅述
const target = process.env.api_url || "http://192.168.124.9:8888";
module.exports = {
// "/": {
// target: target,
// secure: false,//接受https且證書的后臺(tái)服務(wù)器
// changeOrigin: true,
// },
context: ['/auth', '/api','/logOut'],//將多個(gè)特定路徑代理到同一目標(biāo)
target: target,//接受https且證書的后臺(tái)服務(wù)器
changeOrigin: true,//接口跨域時(shí)晓褪，需要配置，將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)URL
};
這里插一句综慎，如果要請(qǐng)求不跨域還可以修改接口的請(qǐng)求頭涣仿，例如我express寫的接口，所以我會(huì)在請(qǐng)求前做相應(yīng)的參數(shù)設(shè)置
//設(shè)置允許跨域訪問(wèn)該服務(wù).
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
//Access-Control-Allow-Headers ,可根據(jù)瀏覽器的F12查看,把對(duì)應(yīng)的粘貼在這里就行
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
如果要需要進(jìn)行其他參數(shù)的配置可以參照webpack官方文檔
