vue 前端跨域

一、是什么

问题描述：

在本地开发过程中，调用后端程序员提供的接口获取数据，希望将获取的数据渲染到页面中，但是浏览器报错：

// 控制台报错信息Access to XMLHttpRequest at'http://x.x.x.x/data/getdata'fromorigin'http://localhost:8080'has been blocked by CORS policy: The'Access-Control-Allow-Origin'header has a value'http://x.x.x.x:8080'that is not equal to the supplied origin.

查看Network中的内容时发现XHR中该请求的状态Status为200，但是页面中数据不显示。

这种情况是由浏览器的同源策略导致的跨域问题。

二、为什么

跨域问题的出现是因为浏览器存在同源策略问题，所谓同源:即两个页面具有相同的协议（protocol），主机（host）和端口（port），它是浏览器最核心也是最基本的功能，如果没有同源策略，浏览器将会十分危险，随时都可能受到攻击。当我们请求一个接口获取数据的时候，出现如："Access-Control-Allow-Origin" 等报错信息即说明该请求跨域。

三、怎么办

1.在vue项目根目录下找到vue.config.js文件（如果没有该文件可自己创建），在proxy中设置跨域。

更多vue.config.js相关配置可访问Vue CLI 查看配置参考

其中也有devServer和devServer.proxy配置的详细说明

在vue项目中配置proxy解决跨域问题的原理是：将域名发送给本地的服务器（启动vue项目的服务，localhost:8080），再由本地的服务器去请求真正的服务器。

---

2.在vue项目src目录下找到main.js文件，在创建axios实例的时候将baseURL设置为 /api ，这时候我们的跨域问题便已解决。

//main.js

import axios from 'axios' 

Vue.prototype.$axios = axios

//配置请求的根路径

axios.defaults.baseURL ='/api'

---

3.重新启动项目即可获取到数据并在页面中显示了，此时我们在浏览器查看Network中的请求信息会看到Request URL是：http://localhost:8080/api/data/getdata，

多了个 /api，但并不影响我们请求数据。

---

4.注意 一定是 重启！！！！！ 不是刷新页面！！！！

---

参考链接