Vue 配置服务器代理 解决跨域方案

在vue.config.js中设置如下代码:

// vue.config.js
// 这些配置 大家复制就行 基本都是写死的
// 配置之后重启 

// 这个配置就是 vue脚手架帮你 开启了一个隐藏的服务器
// 帮你转发了
module.exports = {
  // 修改的配置 配置 proxy 服务器代理
  // "/api/getok.php"
  // http://122.51.238.153/getok.php
  devServer: {
      proxy: {
        //  如果你的地址 以 /api 开头 他就会请求到 http://122.51.238.153
          '/api': {
              target: 'http://122.51.238.153',
              changeOrigin: true, // changeOrigin为true 本地会虚拟一个服务器接受你的请求并代你发送;
              // ws: true,
              pathRewrite: {
                '^/api': '' // 请求的时候 /api就会替换成 ''
              }
          }
      }
  }
}

然后在main.js中设置axios的根路径为/api就可以了

axios.defaults.baseURL = '/api'

如果请求网址为http://122.51.238.153/getok.php

// 正常发送请求就可以了
this.$http.get('/getok.php')

近期get的新技能 希望对大家有所帮助!

你可能感兴趣的:(Vue 配置服务器代理 解决跨域方案)