乐趣区

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

jiezi

在 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

退出移动版