axios 跨域请求问题

[MrMike]

框架用的是 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 }
})

[zhoufenfens]

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

[MrMike]

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

[lianyue]

自己搜 cors 跨域

[orancho]

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

[zhoufenfens]

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

[MrMike]

@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]

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

[binux]

@MrMike 本地运行你说的是 file:// ?那不行

[MrMike]

@binux 本地用的是 npm run dev 出来的页面请求的，这个应该不影响的吧。

[MrMike]

@binux http://localhost:8080/#/

[binux]

@MrMike #10 那你到 network 看那个请求不就一清二楚了吗

[MrMike]

@binux network 里获取不到服务器的数据，console 一直报错。

[crystom]

OPTIONS 请求吧，https://juejin.im/entry/58eaf351a22b9d0058a8e35c

[MaxBear]

用 node 设置代理就好啦。
具体请看 https://www.bear777.com/blog/vue-vue-axios-vue-resource-vue

[wkan]

axios 在发跨域请求的时候会先发一个 options 请求，服务器没有处理好这个 options 请求吧

[riggzh]

浏览器跨域，加头

[VUyUhgFSdzGkm53t]

https://github.com/daoyi7/how-to-cross-vue/blob/master/README.md

[MrMike]

@MaxBear 谢谢，获取到了。

[MaxBear]

@MrMike #18 不谢不谢~