V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MrMike
V2EX  ›  Vue.js

axios 跨域请求问题

  •  
  •   MrMike · 2017-11-13 01:50:19 +08:00 · 13452 次点击
    这是一个创建于 2569 天前的主题,其中的信息可能已经有所发展或是发生改变。
    框架用的是 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
        1
    zhoufenfens  
       2017-11-13 02:12:48 +08:00 via Android
    你看请求里面加了这个头了吗'Access-Control-Allow-Origin'
    MrMike
        2
    MrMike  
    OP
       2017-11-13 02:50:45 +08:00
    @zhoufenfens 在 vue 的请求里还要加这个参数?
    lianyue
        3
    lianyue  
       2017-11-13 02:51:59 +08:00 via iPhone
    自己搜 cors 跨域
    orancho
        4
    orancho  
       2017-11-13 03:11:37 +08:00
    明明是服务器没配置好……
    zhoufenfens
        5
    zhoufenfens  
       2017-11-13 03:11:38 +08:00 via Android
    @MrMike 这个是服务器在 respnse header 里面加的,告诉浏览器当前哪个域给他发请求是合法的。不知道你说的服务器是支持跨域的结论是哪里得出来的
    MrMike
        6
    MrMike  
    OP
       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
        7
    MrMike  
    OP
       2017-11-13 03:35:42 +08:00
    @zhoufenfens 在 vue 里面,请求远程服务器的 response header 里面没有 Access-Control-Allow-Origin 这样的参数的。
    binux
        8
    binux  
       2017-11-13 03:37:03 +08:00 via Android
    @MrMike 本地运行你说的是 file:// ?那不行
    MrMike
        9
    MrMike  
    OP
       2017-11-13 03:39:38 +08:00
    @binux 本地用的是 npm run dev 出来的页面请求的,这个应该不影响的吧。
    MrMike
        10
    MrMike  
    OP
       2017-11-13 03:40:20 +08:00
    @binux http://localhost:8080/#/
    binux
        11
    binux  
       2017-11-13 03:41:41 +08:00
    @MrMike #10 那你到 network 看那个请求不就一清二楚了吗
    MrMike
        12
    MrMike  
    OP
       2017-11-13 03:46:55 +08:00
    @binux network 里获取不到服务器的数据,console 一直报错。
    crystom
        13
    crystom  
       2017-11-13 04:08:36 +08:00   ❤️ 1
    MaxBear
        14
    MaxBear  
       2017-11-13 08:05:19 +08:00 via Android
    用 node 设置代理就好啦。
    具体请看 https://www.bear777.com/blog/vue-vue-axios-vue-resource-vue
    wkan
        15
    wkan  
       2017-11-13 09:18:26 +08:00 via iPhone
    axios 在发跨域请求的时候会先发一个 options 请求,服务器没有处理好这个 options 请求吧
    riggzh
        16
    riggzh  
       2017-11-13 09:28:30 +08:00
    浏览器跨域,加头
    MrMike
        18
    MrMike  
    OP
       2017-11-13 15:06:09 +08:00
    @MaxBear 谢谢,获取到了。
    MaxBear
        19
    MaxBear  
       2017-11-13 15:27:20 +08:00
    @MrMike #18 不谢不谢~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6065 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:45 · PVG 10:45 · LAX 18:45 · JFK 21:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.