博客

VUE跨域问题Access to XMLHttpRequest at

  • Post category:http

在使用Vue进行开发时，有时会遇到跨域问题，导致浏览器报错“Access to XMLHttpRequest at…from origin…has been blocked by CORS policy”。这个问题通常是由于浏览器的同源策略导致的。以下是解决这个问题的完整攻略：

解决方案

1. 使用代理

一种解决方法是使用代理。可以在Vue的配置文件添加一个代理配置，将请求转发到目标服务器。可以在vue.config.js文件中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这将把所有以/api开头的请求转发到http://localhost:8080服务器上。

2. 设置响应头

另一种解决方法是在服务器端设置响应头。可以在服务器端的响应头中添加以下内容：

Access-Control-Allow-Origin: *

这将允许所有域名的请求访问服务器资源。

示例1：使用代理

假设需要访问的API地址为http://example.com/api，可以使用以下代码在Vue中发起请求：

axios.get('/api')
  .then(response => {
    console.log(response.data)
  })
  .catch => {
    console.log(error)
  })

这将把请求转发到http://localhost:8080/api服务器上。

示例2：设置响应头

假设使用的是Node.js服务器，可以在端的响应头中添加以下内容：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

这将允许所有域名的请求访问服务器资源。

结语

在使用Vue进行开发时，有时会遇到跨域问题，导致浏览器报错“Access to XMLHttpRequest at…from origin…has been blocked by CORS policy”。这个问题通常是由于浏览器的同源策略导致的。本文提供了解决这个问题的完整攻略，包括使用代理和设置响应头。同时，文还提供了两个示例，分别介绍了如何使用代理和如何设置响应头。

Tags: