2023聊聊Vue Router跨域报错的原因和解决方法

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。

三、解决跨域报错方法

1. 使用后端代理

后端代理可以绕过跨域限制。通过向另一个站点发送请求和接收响应的方式，服务器完成请求和响应，并分别对请求的资源和响应的数据进行处理。在前端代码中，我们只需将请求发送到后端代理的 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)
  })
})

2. 配置 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跨域报错的原因和解决方法的详细内容，更多请关注zzsucai.com其它相关文章！