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

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

  •  
  •   lxk11153 · 2020-02-18 08:22:57 +08:00 · 4967 次点击
    这是一个创建于 1500 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 安装扩展,如 UnXSS 之类

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

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

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

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