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 跨域报错的原因和两种方法的解决方法。
以上就是聊聊vue router跨域报错的原因和解决方法的详细内容。