vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解决

跨域问题指的是在同源策略下，浏览器禁止向不同源地址发送请求，这是为了保证客户端数据的安全性。而Vue.js作为常用的前端框架，在与后台服务进行交互时，就需要面对跨域问题。

下面，我们就来详细讲解一下“Vue跨域问题：Access to XMLHttpRequest at ‘http://localhost’解决”的完整攻略。

1. 什么是跨域问题

跨域问题是浏览器出于安全考虑禁止跨域访问另一个域下的资源。具体表现为，在浏览器中向不同域名或端口发送Ajax请求时，浏览器的行为是拒绝该请求，抛出错误信息。

1. 解决方案

通常有以下几种常用的解决方案：

• 服务器端设置HTTP头

服务器端设置HTTP头，允许当前域名进行跨域访问，例如：Access-Control-Allow-Origin设置为*。

示例代码：

res.setHeader('Access-Control-Allow-Origin', '*');

• 使用JSONP

JSONP是一种跨域解决方案，它的原理是通过在前端创建一个script标签，指向服务端的API地址，并且在该API接口的查询参数中加入一个回调函数的名称，服务端会将回调函数的名称和返回的数据组装成一段JS代码，返回给前端。前端得到该JS代码后，会执行该代码。

示例代码：

import axios from 'axios'

axios.jsonp(url, {}, (data) => {
  console.log(data)
})

• 使用代理

使用代理是一种常见的解决跨域问题的方法，它的原理是前端向自身的服务端发起请求，由该服务端在后端请求数据并返回给前端。

示例代码：

在Vue.config.js文件中配置proxyTable：

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/json'
    }
  }
}

其中，/api是前端对后端API请求的地址，可以在前端请求API的地址中使用/api替换。target指向接口的地址，pathRewrite用于将前端请求的/api替换成后端的/json。

1. 后端配置

以上的三种解决方案中，只有第一种需要后端进行配置。在使用服务器端设置HTTP头的方法时，需要后端设置Access-Control-Allow-Origin。

示例代码：

const http = require('http')

http.createServer((req, res) => {
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'text/plain'
  })
  res.end('hello, world')
}).listen(8000)

使用http模块创建一个服务器，给返回的HTTP头部添加Access-Control-Allow-Origin即可。

1. 代码实现

在Vue.js项目中，可以在webpack的配置文件中进行配置。

示例代码：

// config/index.js
module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  }
}

// src/app.js
import axios from 'axios'

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

以上代码中，/api/data是前端请求接口的地址，当我们在前端发起该请求时，会被代理到http://localhost:8000/data地址上，并且在进行HTTP请求时，会将/api替换成了空字符串。接下来，后端的HTTP头部需要加上Access-Control-Allow-Origin即可。

总结

以上就是“Vue跨域问题：Access to XMLHttpRequest at ‘http://localhost’解决”的完整攻略，包括跨域问题的定义、常用的解决方案、后端的配置、代码实现等内容。在Vue.js项目中，我们可以方便地使用webpack的配置来进行跨域处理，同时也可以通过JSONP和代理等方式来解决跨域问题。