VUE跨域问题解决--代理服务器（开发环境）

一、跨域问题

（一） 跨域请求是非常常见的现象，那么是由什么原因造成的呢，例如，在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，如果A地址和B地址在： 协议 域名 端口 有一部分不相同，则说明该请求是跨域的。跨域请求的本质是违背了浏览器的同源策略。

附：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。百度百科：同源策略

（二）此外，并不是所有的跨域请求都会报错，普通的图片请求，css文件请求是不会报错的，跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

二、解决方案之webpack创建代理服务器

目标：通过配置vue-cli请求代理解决开发环境下的跨域问题

实现： vue-cli中集成的跨域解决方案

思路：

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

1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

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

代码实现

1.在vue.config.js配置文件中，配置devServer

module.exports = {
  devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制，根据自身项目需求改动
        // http://localhost:9528/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址（服务器的真实地址）
        }
      }
    }
  }
}

2.配置发送请求的基地址

项目index.html打开的地址

/*例：此项目在本地占用打开的url地址为 http://localhost:9528，则应把在本地创建的代理服务器的地址
改成与项目的不跨域的同源地址 */
/* 我是在 .env.development 文件中配置的变量存储基地址，以此可以解决项目在处于不同环境中需要配置不同的请求服务器的地址的需求 */
// 当发送ajax请求时，会自动把 http://localhost:9528 拼接在 /api 前面
// 修改后的变量
VUE_APP_BASE_API = '/api'

import axios from 'axios'
// 创建一个axios的实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
  // 基于node.js动态获取在 .env.development 文件中配置的变量存储的基地址
})

3.配置自己之前封装好的发送请求的方法接口，此处以登录接口为例
api/user.js(我的文件夹路径)

export function login(formData) {
  return request({
//  url: 'api/sys/login', 原地址
    url: '/sys/login', // 配置后， 前面的api就省略了
    method: 'POST',
    data: formData
  })
}

小结

1. vue-cli集成了跨域代理功能------ 只能用在开发阶段。

2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

3. 特别强调：ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

最终显示的请求地址