Vue项目配置跨域访问和Proxy代理设置

Vue项目配置跨域访问和代理设置

在vue单应用项目开发时，请求后端会出现跨域问题。
常用的解决方案

• 1.前端通过代理进行访问后端
• 2.nodejs设置响应头
• 2.后端设置允许跨域访问

方法1. vue-cli代理

vue2在config/index.js中做配置：

请求http://localhost:8000/adminapi/会代理请求http://localhost:7001/

module.exports = {
  dev: {
    ...
    port: 8000,
    proxyTable: {
      '/adminapi': {
        target: 'http://localhost:7001/',
        changeOrigin: true,
        pathRewrite: {
          '^/adminapi': ''
        }
      }
    },

方法2. Nodejs做中间时行路由转发
可以用nodejs和框架express对请求做路由转发。
在生产环境下更可以免去使用nginx配置反向代理。
方案各有利弊，技术架构选型时需要针对自己的项目环境，并且适合自己的团队是最好的。

//1.引入express模块
const express = require('express');

//2.创建应用对象
const app = express();
//3.