[JavaScript知识库]vue - 开发环境 - 跨域解决

产生原因

我们熟知的跨域问题产生的原因是 , 浏览器本身为了用户安全生成的http网络安全协议,同源策略 ,当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域

也就是说 , 我们前端项目(在服务器中存放)运行的时候 , 在浏览器的url地址栏上面的地址(前端项目运行的服务器地址)

?与后端提供的后端接口地址

协议 域名 端口 三者有一个不一致就会出现跨域

产生跨域的两个重要元素 : 浏览器的同源策略 , 协议或端口

解决方案

1. cors(后端主导)

2.通过vue-cli做接口代理转发(开发环境下前端主导)

实际上,我们在做项目的时候 , 前端主导的解决方案,只能用做开发环境下面 , 当我们项目上线之后 , 还是需要后端做跨域的问题处理

支持理论

请求发送不经过浏览器 , 会存在跨域吗 ?

现实中 , 发送请求的方式, 一共有两种

一种是不经过浏览器的 --> node -->开启服务器发送不会产生跨域

一种是经过浏览器的 --> ajax -->浏览器会产生跨域

前端主导如何做

代理流程 :?

前端本地浏览器运行 -- vue-cli启动本地服务器 -- 后端接口服务器

http://localhost:3000/?--?http://localhost:3000/地址 --?https:// xxx.xxxx.com

第一人 -- 发送请求给? ---? 中间代理服务器?, 帮忙发送请求给 --- 后端服务器

也就是说

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

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

在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可

vue-cli解决跨域配置说明

1. vue.config.js配置文件中 :?

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
         // 到底代理哪些接口 ? 
        '/api': { // 凡是接口中后面域名中带有api的 , 框架都会进行一个代理转发
            target: '真实接口地址写到这里',  // 后端提供的接口地址
            changeOrigin: true, // 开启跨域代理
         }
    }
  }
}

2. 当我们修改完以上配置之后 , 还需要修改一下我们封装请求的基地址 , 将基地址改为我们本地的地址即可 , 但是我们的端口号可能会发生变化，我们没必要每次都修改环境配置文件，所以我们采用相对地址/api，改成相对地址之后，前面的部分会自动和前端服务域名+端口保持一致即可

以上就是我们vue-cli代理服务器的全部步骤和操作了!

?

?