vue脚手架配置代理器解决Ajax请求跨域问题

super码力

已于 2022-05-05 10:58:38 修改

阅读量338

点赞数 3

分类专栏： # Vue学习笔记文章标签： javascript vue 前端 vue.js html

于 2022-05-04 16:55:39 首次发布

本文链接：https://blog.csdn.net/m0_61843874/article/details/124552645

版权

Vue学习笔记专栏收录该内容

29 篇文章 4 订阅

订阅专栏

🧡常用的发送Ajax请求方式：

xhr：new XMLHttpRequest()
jQuery(封装xhr)(太大)
axios(封装xhr)(相对好用)
fetch（IE浏览器兼容性不太好）

💛使用axios发送Ajax请求

步骤：

下载axios（在终端输入npm i axios）
引入axios（在script标签里面输入import axios from 'axios'）
发起axios.get请求

代码示例：
      axios.get('http://localhost:5000/students').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
如果按照以上代码直接发起请求会报错，会产生一个跨域问题，错误如下：

💙解决Ajax请求跨域方式：

cors（最标准的方式，不用前端人员去写，是写服务器的人员在返回响应时加上了几个特殊的响应头）
jsonp（巧妙的方式，借助script标签里面的src属性在引入外部资源的时候不受同源限制的特点，但是需要前后端人员同时配合才行，并且还只能解决get请求的跨域问题，开发中用得少）
代理服务器（用挺多，借助nginx或vue-cli来开启代理服务器）

跨域问题产生及解决图示：

💚第一种vue-cli配置代理服务器的方式

步骤：

查vue-cli文档，找到配置参考里面的devServer.proxy，复制代码devServer:{}
打开vue.config.js文件在module.exports里面粘贴代码
修改axios.get里面的地址为代理服务器的路径

代码示例：

vue.config.js文件代码：
module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    }
    //开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000'
    }
}
App.vue文件代码：
export default {
  name: 'App',
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/students').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
    }
  }
}
注意：使用以上配置代理的方式会产生两个问题

当请求的资源自身有，就不会向提供数据的服务器发起请求
不能配置多个代理

💜第二种vue-cli配置代理服务器的方式

步骤：

查vue-cli文档，找到配置参考里面的devServer.proxy，复制第二段代码devServer:{}
打开vue.config.js文件在module.exports里面粘贴代码
修改axios.get里面的地址为代理服务器的路径

示例代码：

vue.config.js文件代码：

module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    },
    //开启代理服务器
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:5000',
                pathRewrite: { '^/api': '' },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/foo': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/foo': '' },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            }
        }
    }
}

App.vue文件代码：

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/api/students').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
    },
    getCars(){
      axios.get('http://localhost:8080/foo/cars').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
    }
  }
}
</script>