Vue.js入门-请求代理

目前用于解决的问题是：跨域

在本地开发中，脚手架项目默认运行的端口是8080，假如服务端的端口为8000，Vue在请求完数据后，会报一个错误：

Access to XMLHttpRequest at 'http://localhost:8000' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

（1）安装axios模块

npm i axios

（2）在vue.config.js中配置代理。如果没有此文件，在src文件夹同级创建它。

const { defineConfig } = require('@vue/cli-service')  

module.exports = defineConfig({  
  transpileDependencies: true,  
  // 配置代理
  devServer: {  
    proxy: { 
      // 配置代理8000的服务端口
      'api/': {  
        target: 'http://127.0.0.1:8000',  
        changeOrigin: true,  
        pathRewrite: {  
          '^/api': ''  
        }  
      }  
    }  
  },
})

api是任意名称，它用来标识对应的服务端端口号，因为可能出现多台服务器不同端口的情况，还有就是不设置名称，vue会先从/publib路径下去请求资源，如果你打算向服务器请求a.txt，结果vue项目存在/public/a.txt，那么配置代理不设置名称的情况下就会向自身去请求资源了，所以给服务端端口加一个别名，可以自己选择向自身请求资源 OR 向服务器请求资源。

如果给服务端端口设置了别名，请求的时候又需要把别名给剔除了，因为服务端路径并不存在在Vue设置的服务端端口别名，pathRewrire就是做这样的工作。

<script>  
import axios from 'axios'
  
export default {  
  name: 'Son',  
  methods: {
    testAxios() {
      axios.get('http://localhost:8080/api/polls/vue/').then(
        resp => { console.log('error', resp.data) },
        error => { console.log('error', error.message) }
      )
    }
  }
}
</script>

在不设置代理的时候，后端实际url是http://localhost:8000/polls/vue/，然后配置了代理， 这个地址的host:port已经被Vue替换成http://localhost:8080/api，根据配置的代理，/api会被替换成空串，所以请求的地址会从http://localhost:8080/api/polls/vue/被替换成http://localhost:8000/polls/vue/。在配置了代理后，在前端开发里，无需关注后端接口的host:port。