lxk11153
V2EX  ›  问与答

除了这种方法,前端如何解决"Access-Control-Allow-Origin"等?

  •  
  •   lxk11153 · Feb 18, 2020 · 6340 views
    This topic created in 2459 days ago, the information mentioned may be changed or developed.
    1. 安装扩展,如 UnXSS 之类

      https://chrome.google.com/webstore/detail/unxss/cbjmpjkhiafmdnjnigdbelcnbihgpmge

    2. Test CORS: https://webbrowsertools.com/test-cors/

    3. 有其它类型的解决方法吗?

    Supplement 1  ·  Feb 18, 2020
    • 总结 (非面向客户群体)
      • 调整客户端
        • 1 添加启动参数--disable-web-security
        • 2 安装扩展,如 UnXSS 之类
      • 中间加代理
        • 3 原本是A直接请求C的,C不能cors。改为A请求B,由B请求C,B可以cors。可以自行搭建或者使用现成的如 https://cors.zme.ink/ (使用教程)
      • 调整前端代码,如果你是在开发调试的话
        • 4 详见5楼 @Mutoo 说的
    19 replies  •  2020-02-24 13:34:51 +08:00
    randyo
    randyo
    Feb 18, 2020 via Android
    1
    自己搭建后端代理请求
    devld
    devld
    Feb 18, 2020 via Android
    2
    --disable-web-security
    LyleRockkk
    LyleRockkk
    Feb 18, 2020
    3
    前端 我用的是 2L 说的,浏览器快捷方式加后缀, 后端 用 服务器代理请求吧
    mxT52CRuqR6o5
    mxT52CRuqR6o5
    Feb 18, 2020 via Android
    4
    如果不能控制浏览器,纯前端解决不了跨域问题,必须后端配合
    Mutoo
    Mutoo
    Feb 18, 2020
    5
    一般 production 都会在后端解决这个问题。而在 locahost 测试的时候,可以在 webpack devServer 增加 proxy 设置,代理后端的语法,就可以绕过 cors 限制
    https://webpack.js.org/configuration/dev-server/#devserverproxy
    weixiangzhe
    weixiangzhe
    Feb 18, 2020 via Android
    6
    没法子,浏览器的限制,后端解决
    weixiangzhe
    weixiangzhe
    Feb 18, 2020 via Android
    7
    不碰后端代码的话,可以用 nginx 做反向代理
    guorui112
    guorui112
    Feb 18, 2020
    8
    有个 chrome 插件,叫 cors 啥的
    netnr
    netnr
    Feb 18, 2020❤️1
    9
    Geo200
    Geo200
    Feb 18, 2020
    10
    如果面向开发者,选楼上任意一个方法都可行,如果面向客户,就不要指望前端来解决这个问题了,必须由服务器来解决
    hyy1995
    hyy1995
    Feb 18, 2020
    11
    这是在问怎么解决跨域吗…怎么感觉问的怪怪的。单单前端的话解决不了跨域问题,一般你开发页面都会起个本地服务的吧?生产环境用 webpack proxy,开发环境用 nginx 反代,反正都是代理就完事了
    lxk11153
    lxk11153
    OP
    Feb 18, 2020
    12
    @hyy1995 #11
    1. 233 是跨域(CORS),或者叫访问控制
    2. "前端如何解决",这里的前端我是想表达: 请求 API 有 CORS 但我不能调整 API,所以如何调整自身
    shakaraka
    shakaraka
    Feb 18, 2020
    13
    @lxk11153 #12 用 nginx 转发
    lygmqkl
    lygmqkl
    Feb 18, 2020
    14
    这个不是应该后端给前端做好的事情吗? CORS 的初衷就是为了控制这些乌七八糟的访问,提高规划性啊,当然如果非法请求另当别论, 生产环境只能到后端来解决,哪怕自己做一个中间层
    lxk11153
    lxk11153
    OP
    Feb 18, 2020
    15
    @lygmqkl #14 看场景咯,比如写 UserScript 里请求其它 api
    npe
    npe
    Feb 18, 2020 via iPhone
    16
    二楼
    stevexu
    stevexu
    Feb 18, 2020
    17
    jsonp 也可以
    lxk11153
    lxk11153
    OP
    Feb 18, 2020
    18
    @stevexu #17 不行吧,比如在当前页打开 Console 执行
    ```js
    jQuery.ajax({
    xhrFields: {
    withCredentials: true
    },
    url: "https://developer.mozilla.org/api/v1/whoami",
    dataType: "jsonp"
    });
    ```
    lxk11153
    lxk11153
    OP
    Feb 24, 2020
    19
    update #18 是否 withCredentials 是两种情况;其实我不太明白 jsonp 嘿~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1867 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 15:50 · PVG 23:50 · LAX 07:50 · JFK 10:50
    ♥ Do have faith in what you're doing.