解决在vue使用Ajax发送数据跨越问题

HHYZBC

已于 2022-06-14 17:27:03 修改

阅读量304

点赞数

分类专栏： web 文章标签： ajax 服务器前端 vue.js

于 2022-06-14 17:23:30 首次发布

本文链接：https://blog.csdn.net/HHYZBC/article/details/125280020

版权

web 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue CLI的代理服务器解决跨域问题。方法一是在vue.config.js中简单配置，将所有请求转发到指定服务器。优点是配置简单，但无法配置多个代理或灵活控制请求。方法二是编写具体代理规则，可以设置多个代理并灵活控制，但请求需加前缀。通过代理服务器，前端开发者可以方便地在开发环境中绕过浏览器的同源策略限制。

摘要由CSDN通过智能技术生成

使用代理服务器即可。本机向另一条服务器发送和接收数据之前，都会走代理服务器，由代理服务器进行接收和发送，而代理服务器在接受和发送数据前都会将自己的网络协议、IP地址、端口号进行处理，使得代理服务器的网络协议、IP地址、端口号与本机相同，从而解决跨域问题。

配置方法一：

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

proxy配置项中填写目标服务器的URL

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

配置方法二：

在vue.config.js中编写配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/