前端js如何用代理转发解决跨域问题

 

如何判断跨域请求

在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，

如果A地址和B地址在： 协议域名端口 不全相同，则说明请求是跨域的；

 跨域请求报错的原因

跨域请求出现错误的条件： 浏览器同源策略  &&  请求是ajax类型

 解决方案

代理转发

我的思路:

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：

1. 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

实现:

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角:

module.exports = {
  devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

基地址:.env.development

VUE_APP_BASE_API = '/api'

在接口文件中省略掉api(/代表原来的,+代表新增的)

export function login(formData) {
  return request({
/   url: 'api/sys/login',
+   url: '/sys/login', // 前面的api就省略了
    method: 'POST',
    data: formData
  })
}