【前端学习日记】Vue2开发环境跨域问题

环境跨域问题"/>

【前端学习日记】Vue2开发环境跨域问题

附上参考的大佬文档：

Vue项目的基础搭建和解决Vue中的跨域问题_捡黄金的少年的博客-CSDN博客

自己项目本身用的是最后那种方便的形式，但是一直配置不生效，后来对着大佬文档一个字一个字扣，终于不报跨域的错误了。

跨域问题：最常见的就是报错包含：请求地址 from origin localhost:8080、Access-Control-Allow-Origin、no request ...等等

为什么跨域：据说是浏览器的同源策略，不允许协议、端口、路径不一致的IP相互访问，详情可以自行百度或文档。那我们一般的一般开发的时候就是会打开一个本地服务器嘛，如localhost:8080等，那么我们访问下面这个地址:.json的话，就违背了同源策略。

跨域的原理（来自B站老尚带你学前端的教程）：

        1、将域名发送给本地的服务器

        2、再由本地的服务器去请求真正的服务器

        3、因为请求是从服务端发出的，所以就不存在跨域的问题了

注意：修改vue.config.js 文件需要重启项目

 第一部分：axios请求：

import request from '@/http/index'export function require(data) {return request({url: 'index/ding.json',   //只写路径即可，这是用的Bilibili的一个接口method: 'post',           //.jsondata:data,})

第二部分：axios配置

const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 这里就联动了代理配置了timeout: 5000 // 超时
})// 关于怎么封装axios，见其他大佬文档

第三部分：.env.development文件

## base API 测试环境
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/dev-api'
# 接口服务地址
VUE_APP_SERVICE_URL ='/'  //这里不要配置全地址，只写服务器地址即可

第四部分：vue.config.js

 devServer: {port: 8006, // 端口号，如果端口号被占用，会自动提升1host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0  前端服务启动后的访问ip，默认为localhost, host和port组成了前端服务启动后的访问入口。https: false, //协议open: true, //启动服务时自动打开浏览器访问proxy: {// 配置代理[process.env.VUE_APP_BASE_API]: {// target 指向你要访问的目标路径// 由于在开发环境中配置好了地址，所以这里直接引用即可，见第二部分target: process.env.VUE_APP_SERVICE_URL, secure: true, // 如果是https接口，需要配置这个参数为truechangeOrigin: true,	//必须为true，true表示跨域// 重写路径，写为空就行了pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},
},

第五部分：查看控制台-网络

        发现我们请求的地址被/dev-api替换了，并且请求时和我们的路径拼接起来了，最后通过我们的localhost去访问的。因为我们的target指向的是被替换的地址，这里是https:www.bilibili，然后我们通过VUE_APP_BASE_API来进行替换。

 成功接收到数据

最后：有一些地方我也解释不清楚，所以多看看大佬文档，然后逐个尝试吧！