MrMike
V2EX  ›  Vue.js

axios 跨域请求问题

  •  
  •   MrMike · Nov 13, 2017 · 14159 views
    This topic created in 3189 days ago, the information mentioned may be changed or developed.
    框架用的是 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 replies    2017-11-13 15:27:20 +08:00
    zhoufenfens
        1
    zhoufenfens  
       Nov 13, 2017 via Android
    你看请求里面加了这个头了吗'Access-Control-Allow-Origin'
    MrMike
        2
    MrMike  
    OP
       Nov 13, 2017
    @zhoufenfens 在 vue 的请求里还要加这个参数?
    lianyue
        3
    lianyue  
       Nov 13, 2017 via iPhone
    自己搜 cors 跨域
    orancho
        4
    orancho  
       Nov 13, 2017
    明明是服务器没配置好……
    zhoufenfens
        5
    zhoufenfens  
       Nov 13, 2017 via Android
    @MrMike 这个是服务器在 respnse header 里面加的,告诉浏览器当前哪个域给他发请求是合法的。不知道你说的服务器是支持跨域的结论是哪里得出来的
    MrMike
        6
    MrMike  
    OP
       Nov 13, 2017
    @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
       Nov 13, 2017
    @zhoufenfens 在 vue 里面,请求远程服务器的 response header 里面没有 Access-Control-Allow-Origin 这样的参数的。
    binux
        8
    binux  
       Nov 13, 2017 via Android
    @MrMike 本地运行你说的是 file:// ?那不行
    MrMike
        9
    MrMike  
    OP
       Nov 13, 2017
    @binux 本地用的是 npm run dev 出来的页面请求的,这个应该不影响的吧。
    MrMike
        10
    MrMike  
    OP
       Nov 13, 2017
    @binux http://localhost:8080/#/
    binux
        11
    binux  
       Nov 13, 2017
    @MrMike #10 那你到 network 看那个请求不就一清二楚了吗
    MrMike
        12
    MrMike  
    OP
       Nov 13, 2017
    @binux network 里获取不到服务器的数据,console 一直报错。
    crystom
        13
    crystom  
       Nov 13, 2017   ❤️ 1
    MaxBear
        14
    MaxBear  
       Nov 13, 2017 via Android
    用 node 设置代理就好啦。
    具体请看 https://www.bear777.com/blog/vue-vue-axios-vue-resource-vue
    wkan
        15
    wkan  
       Nov 13, 2017 via iPhone
    axios 在发跨域请求的时候会先发一个 options 请求,服务器没有处理好这个 options 请求吧
    riggzh
        16
    riggzh  
       Nov 13, 2017
    浏览器跨域,加头
    MrMike
        18
    MrMike  
    OP
       Nov 13, 2017
    @MaxBear 谢谢,获取到了。
    MaxBear
        19
    MaxBear  
       Nov 13, 2017
    @MrMike #18 不谢不谢~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5159 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 05:53 · PVG 13:53 · LAX 22:53 · JFK 01:53
    ♥ Do have faith in what you're doing.