应用场景:后端没有进行跨域的时候需要我们自己解决,方案是服务器代理请求

一、环境配置

由于版本更新,vue-cli搭建的项目已经没有config环境配置文件夹了,这时我们需要自己新建一个配置文件:

1.在根目录下新建js文件:vue.config.js

  1. //vue.config.js文件中
  2. module.exports = {
  3. publicPath: '/',
  4. devServer: {
  5. proxy: {
  6. '/api': {
  7. target: 'XXX',
  8. //需要进入的路径,你请求的第三方接口,最好是主地址。方便设置axios的baseUrl
  9. //为了后续不同接口调用。
  10. changeOrigin: true,
  11. // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,
  12. // 这样服务端和服务端进行数据的交互就不会有跨域问题。
  13. pathRewrite: { // 路径重写,
  14. '^/api': '' //替换target中的请求地址,
  15. //也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
  16. }
  17. },
  18. }
  19. }
  20. };

二、挂载axios

为了方便使用我们可以在全局配置中设置axios的baseUrl为/api
在main.js中设置

  1. //main.js文件中
  2. import axios from 'axios'; //导入axios
  3. axios.defaults.baseURL = '/api' //与第一步中的api相同,即获取了target的url值
  4. Vue.prototype.axios = axios //将axios挂载在vue原型上,后面不同文件之间直接this.axios调用

三、调用请求

  1. this.axios
  2. .post("User/Api/login?phone=18084839200&password=12345678&phone_type=android")
  3. .then(res => {
  4. console.log(res.data); // response.data为后端返回的具体数据
  5. alert("请求成功");
  6. })

1.vue中axios前端跨域 - 图1请求成功