vue实现跨域的方法分析

Vue.js跨域实现详解：实例与技巧分享

在我们日常的Web开发中，跨域问题常常困扰着我们。当浏览器限制某些资源跨域访问时，vue.js作为前端框架，也需要面对这个问题。本文将结合实例，详细vue实现跨域的方法和原理。

一、跨域问题的出现

当你在浏览器控制台看到这样的报错：“在请求的资源上没有‘访问控制允许源’标头。，‘

二、后台更改header

跨域问题可以通过后台设置HTTP头部来解决。例如，设置‘Aess-Control-Allow-Origin’和‘Aess-Control-Allow-Method’头部，允许所有来源的访问以及特定的访问方式。

三、使用JSONP进行跨域请求（需引入jquery）

虽然今天不是重点介绍这部分，但JSONP也是一种常用的跨域请求方式。在Vue中，可以结合JQuery的ajax方法实现JSONP跨域请求。以下是一个简单的例子：

```javascript

methods: {

getData() {

var that = this;

$.ajax({

url: 'yoururl',

type: 'GET',

dataType: 'JSONP',

success: function(res) {

that.data = res.data;

}

});

}

}

```

四、使用vue-cli脚手架的proxyTable解决跨域

在使用vue-cli搭建的项目中，可以通过配置proxyTable来解决跨域问题。在config目录下的index.js文件中进行如下配置：

```javascript

proxyTable: {

'/api': { // 使用"/api"来代替具体的源地址

target: ' // 源地址

changeOrigin: true, // 改变源

pathRewrite: {

}

}

}

```

配置完成后，可以通过以下方式发起请求：

```javascript

this.axios.post("/api?type=keji&key=yourkey").then(res => {

console.log("api:" + res);

this.kjnews = res.data.result.data;

});

```

注意，配置完成后需要重启项目（npm run dev）。本文所述的跨域解决方案对vue.js程序设计有一定的帮助，希望能够对大家有所帮助。在实际开发中，可以根据项目需求选择合适的方法来解决跨域问题。