V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kmdd33
V2EX  ›  问与答

请教一个跨域的问题: No 'Access-Control-Allow-Origin' header ,参考了很多教程还是解决不了。

  •  
  •   kmdd33 · 2017-03-27 20:52:29 +08:00 · 27262 次点击
    这是一个创建于 2828 天前的主题,其中的信息可能已经有所发展或是发生改变。
    参考的教程如下: http://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginxhttp://www.tuicool.com/articles/3aaQB3bhttps://segmentfault.com/q/1010000003116113

    自己尝试在 nginx.conf 文件中添加了
    location / {
    add_header Access-Control-Allow-Origin *;
    }





    location / {
    if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    #
    # Om nom nom cookies
    #
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
    }
    if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
    if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
    }

    丝毫不起作用,求助后端伙伴们,怎么搞?
    console 里面的错误(不知道如何贴图,就只能贴 error 了)如下:

    XMLHttpRequest cannot load https://www.mydomain.com/?/ac... No 'Access-Control-Allow-Origin' header is present on the https://www.mydomain.com/?/ac... requested resource. Origin 'https://www.mydomain.com' is therefore not allowed access.
    43 条回复    2017-03-29 10:37:54 +08:00
    ihuotui
        1
    ihuotui  
       2017-03-27 20:56:26 +08:00 via iPhone   ❤️ 1
    cross.org 有所有跨域知识
    kmdd33
        2
    kmdd33  
    OP
       2017-03-27 21:00:42 +08:00   ❤️ 1
    ferrum
        3
    ferrum  
       2017-03-27 21:01:19 +08:00
    别上来就贴一大堆格式乱了的配置啊,起码得说具体点吧。
    fanwei
        4
    fanwei  
       2017-03-27 21:05:10 +08:00
    确实应该说清楚环境。比如油猴脚本里如果用 jquery 怎么设置都会有上面这个提示。必须用对应的 GM 函数。
    kmdd33
        5
    kmdd33  
    OP
       2017-03-27 21:08:25 +08:00
    环境是:军哥的 lnmp ,目前在输入服务器 ip 状态下用户可以登陆,@ferrum @ferrum @fanwei @ihuotui
    kmdd33
        6
    kmdd33  
    OP
       2017-03-27 21:35:45 +08:00 via iPad
    自己用 Cloudflare 做了 301 跳转,无论是输入 mydomain.com 或者 www.domain.com 都会跳转到 https://www.mydomain.com
    johnny23
        7
    johnny23  
       2017-03-27 21:37:34 +08:00 via iPhone
    我以前遇到这些问题 一怒之下把所有接口都做成 jsonp
    kmdd33
        8
    kmdd33  
    OP
       2017-03-27 22:49:38 +08:00
    @johnny23 如何用 jsonp
    johnny23
        9
    johnny23  
       2017-03-27 22:57:52 +08:00 via iPhone
    @kmdd33 额 网上教程一大堆 唯一区别就是返回字符串是一个带了 callback 函数的字符串而已
    ikaros
        10
    ikaros  
       2017-03-27 23:23:27 +08:00
    我记得设置 * 好像是没用的, console 里的提示记得就是说当前 host 和*不匹配之类的, 你是真的需求让所有外部都可以访问? 我当时因为只有两个 host 需要做这个,于是就把这两个 host 存在一个 list 里面,然后看来访的 host 是不是在这个 list 里面,在的话就把这个 host 加到 header 里面
    Numbcoder
        11
    Numbcoder  
       2017-03-27 23:37:00 +08:00

    add_header 'Access-Control-Allow-Origin' '*';
    改成
    add_header Access-Control-Allow-Origin $http_origin;

    试试
    des
        12
    des  
       2017-03-27 23:41:52 +08:00
    @ikaros 不知道是不是和地址有关, 127.0.0.1 是可以的

    kmdd33
        13
    kmdd33  
    OP
       2017-03-28 04:00:57 +08:00 via iPad
    @ikaros 请问具体你是如何添加的呢?如果把*换成 https://www.mydomain.com. 放在自己的 Nginx.conf 文件里面,还是不行啊
    kmdd33
        14
    kmdd33  
    OP
       2017-03-28 04:02:48 +08:00 via iPad
    @Numbcoder 按照你的方法,依然有错误
    Showfom
        15
    Showfom  
       2017-03-28 04:55:55 +08:00 via iPhone
    你没指定文件的后缀 我们的配置给你参考

    # Cross domain webfont access
    location = /favicon.ico { log_not_found off; access_log off; }

    location = /robots.txt { log_not_found off; access_log off; allow all; }

    location ~* .(ogg|ogv|mp4|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Timing-Allow-Origin" "*";
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    expires max;
    log_not_found off;
    }

    location ~* .(ttf|ttc|otf|eot|woff|woff2|svg|svgz)$ {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Timing-Allow-Origin" "*";
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    expires max;
    log_not_found off;
    }
    Showfom
        16
    Showfom  
       2017-03-28 04:56:34 +08:00 via iPhone
    preload 那段头部不是 https 可以忽略
    kmdd33
        17
    kmdd33  
    OP
       2017-03-28 05:25:08 +08:00 via iPad
    @Showfom 是不是把你发的这段代码,也粘贴到我服务器上 Nginx.conf 文件里面?
    binux
        18
    binux  
       2017-03-28 05:29:24 +08:00
    把返回头发出来啊, console 没有用
    Showfom
        19
    Showfom  
       2017-03-28 06:23:55 +08:00 via iPhone
    @kmdd33 嗯 用在 server 段
    ikaros
        20
    ikaros  
       2017-03-28 08:50:16 +08:00
    @kmdd33 我不是配置在 nginx 里面的,我是在程序 handler 里面加的
    ikaros
        21
    ikaros  
       2017-03-28 09:16:50 +08:00
    @des 好像不是, 是可以的, 不过一般感觉不会用*
    jugelizi
        22
    jugelizi  
       2017-03-28 10:37:01 +08:00
    如果你要 post 就不能 *
    要指定域名就可以了
    MinonHeart
        23
    MinonHeart  
       2017-03-28 10:43:59 +08:00
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Origin: *
    这两个不能一起用。 Credentials 为 true , Access-Control-Allow-Origin 使用具体的值
    kmdd33
        24
    kmdd33  
    OP
       2017-03-28 13:17:47 +08:00
    @binux @MinonHeart @jugelizi @ikaros 响应头截图: https://cl.ly/3i30402Q3624/annotate ,求教育。
    kmdd33
        25
    kmdd33  
    OP
       2017-03-28 13:30:29 +08:00
    @Showfom 把您发的配置代码粘贴到 nginx.conf 的 server 段,重启,还是老错误,麻烦你看看我发的响应头截图
    Showfom
        26
    Showfom  
       2017-03-28 14:00:02 +08:00 via iPhone
    @kmdd33 没空帮你看 你自己研究去吧
    kmdd33
        27
    kmdd33  
    OP
       2017-03-28 14:01:20 +08:00
    @MinonHeart @Numbcoder 我把 Access-Control-Allow-Origin: * 中的*改成了 https://www.mydomain.com 还是不行。
    MinonHeart
        28
    MinonHeart  
       2017-03-28 14:13:23 +08:00
    @kmdd33 你截图中的 origin 还是*
    jswh
        29
    jswh  
       2017-03-28 14:47:13 +08:00
    ajax 在发送正式数据之前会先用 HEAD 请求一次。你 HEAD 没有加 Access-Control-Allow-Origin
    jswh
        30
    jswh  
       2017-03-28 14:50:45 +08:00
    @jswh oh,记错了,是 options
    kmdd33
        31
    kmdd33  
    OP
       2017-03-28 14:51:07 +08:00
    @MinonHeart 现在 Access-Control-Allow-Origin 里面既有*也有 https://www.mydomain.com , 我把我的 nginx.conf 也截图了,您再分析一下怎么回事? https://cl.ly/2Z3S3W1Y0j3F/annotate ( header 头) https://cl.ly/0O0f2Q402R3R/annotate ( nginx.conf 截图)
    kmdd33
        32
    kmdd33  
    OP
       2017-03-28 14:53:01 +08:00
    Dlad
        34
    Dlad  
       2017-03-28 17:04:21 +08:00
    后端代码里输出 Access-Control-Allow-Origin 头就可以了,现代浏览器都认识。
    ie8 需要引入额外的 js ,并对 ajax 请求有一定要求。
    ljcarsenal
        35
    ljcarsenal  
       2017-03-28 17:39:23 +08:00
    你看看是不是报错的请求之前有个 option 方法的请求
    shuson
        36
    shuson  
       2017-03-28 17:49:53 +08:00
    cors 配置没问题,应该是其他没注意到的地方的问题
    MinonHeart
        37
    MinonHeart  
       2017-03-28 18:12:25 +08:00
    headers 中的同一个项不能多配,这东西又不是随便配的
    最终配出来是
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Origin: access-origin
    banksiae
        38
    banksiae  
       2017-03-28 18:50:19 +08:00
    噗噗,前几天刚遇到这个问题, Access-Control-Allow-Origin 的问题,后端 set_header ; cookie 的问题,统一域名或者 url 后面加上类 cookie 就行了
    qinxi
        39
    qinxi  
       2017-03-28 19:24:55 +08:00
    其实反向代理可以解决跨域,还是服务端无感知的
    kmdd33
        40
    kmdd33  
    OP
       2017-03-28 19:55:48 +08:00 via iPad
    @qinxi @banksiae 具体请问怎么做呢?
    qinxi
        41
    qinxi  
       2017-03-28 23:09:12 +08:00
    @kmdd33 你的页面在 a.com ,你的 api 在 b.com 那你在 a.com/api 反向代理到 b.com 就行了 .
    030
        42
    030  
       2017-03-29 03:24:16 +08:00
    我前几天换 CloudFront 也碰到过这个,不过加了
    add_header Access-Control-Allow-Origin *;
    就好了,问题只是 CloudFront 会把 header cache ,好像和主题沒什么关系
    cst4you
        43
    cst4you  
       2017-03-29 10:37:54 +08:00
    @qinxi 如果是多媒体类的资源文件你还反代来消耗自己流量吗 233333333
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1537 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:04 · PVG 01:04 · LAX 09:04 · JFK 12:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.