apache vue跨域_vue中的跨域问题

使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

注(api很重要，相当于拦截到api然后将api替换为index里的 target: 'http://news-at.zhihu.com/api',如果缺少了api也会报错，404，但是看出不来到底啥原因

)

1.6 修改页面内容

我们先修改一下页面内容 src\components\Hello.vue

{ { msg }}

{ { author }}

name: 'hello',

data () {

return {

msg: 'vue调用网易云接口',

author: '泥猴啊'

}

}

}

2. 使用axios

2.1 我们先修改一下页面,让页面加载一些动态内容

模板修改如下

{ { msg }}

{ { author }}

• { { music.name }}

js部分修改如下

export default {

name: 'hello',

data () {

return {

msg: 'vue调用网易云接口',

author: '泥猴啊',

musics: []

}

},

mounted: function () {

axios.get('http://music.163.com/api/playlist/detail?id=19723756')

.then(function (res) {

console.log(res)

}, function (error) {

console.log(error)

})

}

}

_

然后保存

发现页面有一个报错

http://eslint.org/docs/rules/no-undef 'axios' is not defined

axios没有定义,是因为我们没有导入axios模块的原因

我们在js部分顶部导入一下axios模块

import axios from 'axios'

加载axios模块之后错误提示消失了。

打开调试页面console界面

发现有一个报错

No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://localhost:8080' is therefore not allowed access.

这里的not allowed access就是提示我们浏览器不支持跨域请求，搜索了很多资料，网易云不支持跨域请求的(网易云的服务器在返回你的请求中没有Access-Control-Allow-Origin这个head字段)。

那怎么办呢?

那我们只能使用代理了。

下面将介绍3种代理方式：1，远程代理 2，php代理 3，node代理

3 代理

3.1 远程代理

就是利用别人写好的代理接口，代理发送你的请求，这样就不会跨域了。

首先我们定义一个常量API_PROXY

const API_PROXY = 'https://bird.ioliu.cn/v1/?url='

然后在axios请求里面拼接一下字符串

axios.get(API_PROXY + 'http://music.163.com/api/playlist/detail?id=19723756')

js 完整代码如下

const API_PROXY = 'https://bird.ioliu.cn/v1/?url='

import axios from 'axios'

export default {

name: &#