Vue配置代理服务器proxy 解决前端跨域

1,724 阅读1分钟

什么是跨域?

跨域:在web中存在与游览器客户端和服务器端之间才会有的,服务器与服务器之间是不存在跨域的

如何解决跨域

方案一:后端解决(cors 由后端人员解决),jsonp技术

方案二:配置代理服务器(前端人员解决 )主要解决方案,解决的原理还是利用 服务器之间的转发

在Vue中的实现

// vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
       // 已 /api 开通的请求会被 vue cli localhost:8080代理 转发到 http://localhost:3000
       // 并且 在转发之和会去掉 /api
      '/api': {
        target: 'http://localhost:3000',// 要跨域的域名
        ws: true,// 是否开启webSokit
        changeOrigin: true, // 是否开启跨域,
        pathRewrite: { '^/api':''} //
      },
      // 配置多个 代理
      '/get': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}