VUE跨域问题Access to XMLHttpRequest at

Vue跨域问题Access to XMLHttpRequest at是Web前端开发中常见的问题之一，下面是详细的攻略。

什么是跨域问题

在Web开发中，当浏览器发送HTTP请求时，由于同源策略的限制，只能向同源的服务器请求数据。如果请求的服务器与当前页面的域名、协议、端口不同，则会触发跨域问题。

跨域问题通常会引发许多安全性问题，例如：XSS攻击、CSRF攻击等。因此Web浏览器会针对跨域问题做出相应的防范措施。

解决Vue跨域问题

1.后端处理跨域

实现跨域的一个方案是在后端进行处理。例如在Node.js的Express框架中，我们可以引入cors中间件：

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

或是手动设置响应头部：

const express = require('express')
const app = express()

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  if (req.method === 'OPTIONS') {
    res.sendStatus(200)
  } else {
    next()
  }
})

2.使用代理

配置代理是另一种解决跨域问题的方案。我们可以在Vue项目的配置文件中，找到devServer属性，并添加proxy属性。

module.exports = {
  devServer: {
    open: true,
    port: 8800,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端接口的域名地址
        changeOrigin: true, // 是否开启跨域
        pathRewrite: {
          '^/api': '' // 重写路径，将请求前缀 /api 替换为空（即去掉 /api）
        }
      }
    }
  }
}

以上代码中，我们设置了开发服务器的端口为8800，并将所有请求转发到后台服务器的地址 http://localhost:3000 ，设置了跨域。路径重写可以让我们的客户端代码更加干净，不用通过URL地址来区分接口地址和静态文件地址。

3.JSONP

JSONP实现跨域是很常见的做法，JSONP通过动态创建script标签，并在后端响应中返回JSON数据，从而达到跨域的目的。Vue中可以通过axios库来实现JSONP跨域请求：

let scriptNode = document.createElement('script')
scriptNode.src = 'http://localhost:3000/api/getData?callback=callback'
document.body.appendChild(scriptNode)

function callback(data) {
  console.log(data)
}

4.CORS

CORS是跨域资源共享，是一个W3C标准。前端可以通过修改HTTP请求头部来使用CORS。Vue中，我们可以轻松配置axios库，来使用CORS方法解决跨域问题。

axios.get('http://localhost:3000/api/getData', {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  withCredentials: true, // 表示跨域请求时是否需要使用凭证
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

以上代码中，我们通过设置withCredentials为true来使用凭证，实现跨域请求。

结束语

以上是关于Vue跨域问题Access to XMLHttpRequest at的攻略。在使用跨域的解决方法时，需要根据具体的场景选择合适的方案。不同的方案需要考虑到它们的优缺点以及使用得当的场景。