vue router 跨域报错是一个很普遍的问题。在使用 vue router 路由时，如果跨域访问另一个网站或 api，会出现跨域报错。本文将介绍 vue router 跨域报错的原因和解决方法。
一、跨域的原因
在浏览器中，同源策略是一种安全机制，限制了一个网站下的 JavaScript 只能访问该站点下的资源。同源策略不允许通过脚本跨域访问其他域的数据，比如在一个域名下的页面中使用 Ajax 调用另一个域名下的 API 接口。这是因为这样做会带来安全问题，攻击者可以通过跨域脚本窃取用户的敏感信息。
二、vue-router 的跨域报错
Vue Router 路由是基于浏览器的，因此也受到同源策略的限制。当我们在 Vue 组件中使用 Vue Router 访问另一个站点或 API 接口时，会出现跨域报错。其报错信息一般为：
立即学习“前端免费学习笔记（深入）”；
Access to XMLHttpRequest at 'http://xxxxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个跨域报错提示了一个 CORS 的错误，因为浏览器限制了向其他域名的请求，其他站点不允许跨域请求您的站点的资源。如果您使用的是本地服务器，则可能会遇到这个问题，因为您的服务器可能没有配置 CORS，而 Vue Router 跨域请求需要 CORS。
三、解决跨域报错方法
- 使用后端代理
后端代理可以绕过跨域限制。通过向另一个站点发送请求和接收响应的方式，服务器完成请求和响应，并分别对请求的资源和响应的数据进行处理。在前端代码中，我们只需将请求发送到后端代理的 URL，然后在后端代理中将请求发送到目标 URL，并将接收到的响应返回给前端。以下是一个示例代码：
// 前端代码
fetch('/api').then(res => {
console.log(res)
})
// 服务器代理代码
app.get('/api', (req, res) => {
axios.get('http://othersite.com/api').then(response => {
res.json(response.data)
}).catch(error => {
console.log(error)
})
})- 配置 CORS
如果想通过浏览器直接访问跨域 API 或资源，可以通过自行配置服务器的 CORS。在服务器上设置 Access-Control-Allow-Origin 头部以允许跨域请求。以下是一些常见的 CORS 配置示例：
-
Node.js（Express）：
res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type") res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS") next() -
Apache：
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>
-
Nginx：
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
四、总结
Vue Router 跨域报错是一个很常见的问题，在使用 Vue.js 框架开发时，深入理解该问题，协助解决跨域问题，利用后端代理和 CORS 配置避免 CORS 报错，既可以提升开发效率，又可以有效提高代码质量。以上就是 Vue Router 跨域报错的原因和两种方法的解决方法。
