axios 跨域请求问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2568 天前的主题，其中的信息可能已经有所发展或是发生改变。

框架用的是 Vue 2.0, 本地是 Mac 系统，远程是 Apache 环境。
使用 axios 进行本地请求远程服务器数据，但是报“ has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误，经过测试，服务器是支持跨域请求的，我用 jQuery Ajax 请求，是可以获取到数据的。

组件中的 JS:
<script>
export default {
data () {
return {
lastestPost: '',
errors: []
}
},
created () {
this.$http.get('http://api.mydomain.com/post')
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push()
})
}
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(Element)

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

19 条回复 • 2017-11-13 15:27:20 +08:00

zhoufenfens

2017-11-13 02:12:48 +08:00 via Android

你看请求里面加了这个头了吗'Access-Control-Allow-Origin'

MrMike

2017-11-13 02:50:45 +08:00

@zhoufenfens 在 vue 的请求里还要加这个参数？

lianyue

2017-11-13 02:51:59 +08:00 via iPhone

自己搜 cors 跨域

orancho

2017-11-13 03:11:37 +08:00

明明是服务器没配置好……

zhoufenfens

2017-11-13 03:11:38 +08:00 via Android

@MrMike 这个是服务器在 respnse header 里面加的，告诉浏览器当前哪个域给他发请求是合法的。不知道你说的服务器是支持跨域的结论是哪里得出来的

MrMike

2017-11-13 03:34:33 +08:00

@zhoufenfens 刚才仔细检查了下，直接访问 http://api.mydomain.com/post，返回的 header 里面是有'Access-Control-Allow-Origin'的参数的：
Access-Control-Allow-Origin:*
Cache-Control:no-cache, private
Connection:Keep-Alive
Content-Length:7
Content-Type:application/json

我在另外一个项目里用 jQuery ajax 请求，也是可以获取到数据，但是在 vue 里面还是报错，不会是因为 vue 项目是本地运行环境的原因吧。

MrMike

2017-11-13 03:35:42 +08:00

@zhoufenfens 在 vue 里面，请求远程服务器的 response header 里面没有 Access-Control-Allow-Origin 这样的参数的。