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

本地调试网站调用其他网站提供的 API 提示 No 'Access-Control-Allow-Origin' header is present on the requested resource 要如何解决呢?

  •  
  •   nmgwddj · 2017-06-07 16:30:46 +08:00 · 13162 次点击
    这是一个创建于 2728 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我自己做了一个本地的调试网站,所有目前还是在本地开发状态,我到聚合数据找到了一些股票相关的 API,我通过 fetch 或 d3-request 中的 json 方法来获取数据,浏览器都会返回如下错误:

    XMLHttpRequest cannot load http://web.juhe.cn:8080/finance/stock/hs?gid=sh603496&&key=7e519487c11e168579190973e3772db0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stock.mycode.net.cn:8080' is therefore not allowed access.
    

    我请求的代码如下:

    const appkey = '7e519487c11e168579190973e3772db0';
    const gid = 'sh603496';
    const url = `http://web.juhe.cn:8080/finance/stock/hs?gid=${gid}&&key=${appkey}`;
    
    json(url, (err, data) => {
    console.log(err, data);
    });
    

    因为服务器不是我的,我是调用的别人提供的 API,所以修改服务器配置的方法就不行了。

    我也找到了一个 Chrome 拓展 Allow-Control-Allow-Origin: * 可以解决该问题,但是我不想让其他代码开发者也依赖拓展。

    所以请教大家,是否有方法可以不借助拓展、不修改服务器参数的情况下,实现数据的获取?

    9 条回复    2017-06-07 21:11:13 +08:00
    adspe
        1
    adspe  
       2017-06-07 16:34:54 +08:00
    我之前遇到过。可以看我代码,已经解决
    https://github.com/alivelee/su-weather
    learnshare
        2
    learnshare  
       2017-06-07 16:50:05 +08:00
    自己写后端来请求数据,然后交给自己的前端页面
    airyland
        3
    airyland  
       2017-06-07 18:11:44 +08:00
    在 nginx 上代理该域名,加上 cors 就行了,几行代码。
    jugelizi
        4
    jugelizi  
       2017-06-07 18:34:37 +08:00
    如何对方不提供 jsonp 的话
    1、自己写后端代码请求对方接口
    2、用 nignx 的反代 proxy_pass
    royzxq
        5
    royzxq  
       2017-06-07 18:55:07 +08:00
    使用 webpack 的话使用 http-proxy-middleware ,
    http://www.jianshu.com/p/95b2caf7e0da

    https://github.com/chimurai/http-proxy-middleware

    或者使用 nginx
    qqfs
        6
    qqfs  
       2017-06-07 19:26:42 +08:00 via Android
    --disable-web-security
    GoBeyond
        7
    GoBeyond  
       2017-06-07 20:11:23 +08:00 via Android   ❤️ 1
    经典的跨站问题
    解决方法
    1. 你自己搞数据源本地写一个 api,或者在服务器反代他们的 api,然后在 header 插域控头
    2. 联系 api 提供者给你写域控,或者给你一个 jsonp
    nmgwddj
        8
    nmgwddj  
    OP
       2017-06-07 20:45:38 +08:00
    感谢各位回复,我参考 1 楼代码测试一下。
    nmgwddj
        9
    nmgwddj  
    OP
       2017-06-07 21:11:13 +08:00
    我找到了一个很方便的方案,不用代理服务器,不用其他 webserver,不用修改服务器头等信息。

    http://www.jianshu.com/p/19a6aefca350
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1295 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:31 · PVG 07:31 · LAX 15:31 · JFK 18:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.