为什么要做代理配置？

前端开发中经常会遇到跨域的问题，特别是在开发环境，本地开发请求后台接口，因为前端服务和后台服务不是同一台电脑所以会出现跨域的现象，也就是遵循我们的同源策略，即协议，域名，端口不一致时就会出现跨域的现象， 此时在我们本地调试程序久需要惊醒代理配置，我用的angular框架做开发，所以本文围绕angular
如下图，我是用express配置了一个接口

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;

然后在不做任何操作的情况下请求这个/auth的这个接口，接口的全称应该是192.168.1.109:8888/auth
结果会报错，如下图

image.png

新建JSON配置文件设置代理配置

在项目的根目录新建JSON文件

   {
    "/":{
        "target":"http://192.168.1.109:8888",
        "secure":false,
        "changeOrigin":true
    }
}

• target: 请求目标服务地址
• secure：为false时，允许不是https和安全证书无效的服务
• changeOrigin：为true ，允许请求跨域
  配置好了，要在pageage.json文件中添加服务启动时同时启动代理文件

image.png

配置好了后，npm start启动项目，请求成功

image.png

如果想代理多个路径，可以换一种方式配置，加了个context参数

{
    "context":["/auth","/api"],
    "target":"http://192.168.1.109:8888",
    "secure":false,
    "changeOrigin":true
}

此配置可以代理接口地址为“/auth”和“/api”开头路径的服务，以上方法是用json文件配置代理的，还可以用ES6模块化的方式配置

用ES6模块化方式配置代理

同样在项目的根目录新建一个proxy.config,js文件，此文件是js文件
和json文件同样配置,此时不在赘述

const target = process.env.api_url || "http://192.168.124.9:8888";
module.exports = {
  // "/": {
  //   target: target,
  //   secure: false,//接受https且证书的后台服务器
  //   changeOrigin: true,
  // },
  context: ['/auth', '/api','/logOut'],//将多个特定路径代理到同一目标
  target: target,//接受https且证书的后台服务器
  changeOrigin: true,//接口跨域时，需要配置，将主机标头的原点更改为目标URL
};

这里插一句，如果要请求不跨域还可以修改接口的请求头，例如我express写的接口，所以我会在请求前做相应的参数设置

//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

如果要需要进行其他参数的配置可以参照webpack官方文档