在vue单页利用我的项目开发时，防止不了要申请后端，这时通常就会呈现跨域问题。有2种罕用的解决方案

  1. 后端设置容许跨域拜访
  2. 前端通过代理进行拜访后端

上面咱们只说说如何配置vue-cli代理拜访：

vue-cli代理

最简略就是配置vue conifg进行实现
上面配置3个申请的后端，别离是：

  • 申请http://localhost:4201/adminapi/*会代理申请http://localhost:8180/*
  • 申请http://localhost:4201/portalapi/*会代理申请http://localhost:8185/*
  • 申请http://localhost:4201/securityapi/*会代理申请http://localhost:8089/*

因为vue-cli是基于webpack，因而webpack的devServer选项都是反对配置的

module.exports = {    // ...    devServer: {        port: 4201,        proxy: {          '/adminapi': {            target: 'http://localhost:8180',            ws: true,            changeOrigin: true,            pathRewrite: {              '^/adminapi': ''            }          },          '/portalapi/': {            target: 'http://localhost:8185/',            ws: true,            changeOrigin: true,            pathRewrite: {              '^/portalapi': ''            }          },          '/securityapi/': {            target: 'http://localhost:8089/',            ws: true,            changeOrigin: true,            pathRewrite: {              '^/securityapi': ''            }          }        },        disableHostCheck: true, // 这是因为新版的webpack-dev-server出于平安思考，默认查看hostname，如果hostname 不是配置内的，将中断拜访。  },  //...}

Nodejs做两头时行路由转发

能够用nodejs和框架express对申请做路由转发。
在生产环境下更能够免去应用nginx配置反向代理。
计划各有利弊，技术架构选型时须要针对本人的我的项目环境，并且适宜本人的团队是最好的。

后端跨域拜访

后端的跨域拜访设置也是比较简单的，不同语言JAVA PHP Python Go的设置也大同小异。
查问一下都有比拟多的材料，但在生产环境下，为了平安起见，还是倡议不要设置容许跨域拜访，或者限度容许跨域的IP