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

在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