vue请求报cors怎么解决

CORS（跨域资源共享）是一种用于浏览器与服务器进行跨域通信的机制，当使用Vue进行跨域请求时，如果服务器没有设置CORS，就会报跨域错误。

解决方法：

1. 在服务端设置CORS

可以在服务端的响应头中添加如下代码，允许指定的域名来访问：

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range

2. 使用代理

在Vue的配置文件vue.config.js中可以设置代理，在本地开发环境中可以将请求代理到指定的服务器，从而避免跨域问题。示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 将所有以 /api 开头的请求代理到下面的地址
        target: 'http://localhost:3000', // 代理到的地址
        changeOrigin: true, // 是否改变请求头的源地址
        pathRewrite: { // 路径重写规则，将 /api 替换为空字符串
          '^/api': ''
        }
      }
    }
  }
}

在代码中将所有以 /api 开头的请求代理到了 http://localhost:3000，这个地址就是实际的请求地址，将请求头的源地址改为代理地址，路径重写规则将 /api 替换为空字符串。

3. 使用JSONP

JSONP是一种跨域请求的方式，它利用了script标签的跨域特性，将响应结果封装在一个回调函数中返回，Vue也可以使用JSONP来进行跨域请求。示例代码如下：

export function getJSONP(url, params) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    const callbackName = 'jsonp_callback_' + new Date().getTime()
    let callbackParams = ''
    for (const key in params) {
      if (params.hasOwnProperty(key)) {
        callbackParams += `&${key}=${params[key]}`
      }
    }
    script.src = `${url}?callback=${callbackName}${callbackParams}`
    script.onerror = reject
    document.body.appendChild(script)
    window[callbackName] = (data) => {
      resolve(data)
      document.body.removeChild(script)
      delete window[callbackName]
    }
  })
}

这里动态创建了一个script标签，将请求地址和参数拼接成了一个完整的url，将回调函数名作为参数传递到服务端，服务端将响应结果封装在回调函数中返回，客户端通过定义回调函数，将响应结果解析后返回。

以上是三种常见的解决CORS问题的方法，可以根据实际情况选择合适的方式。