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

跨域问题,整不明白了,这边是前端,求解

  •  
  •   liudewa · 15 天前 · 2141 次点击

    我们的项目调了隔壁组的两个接口,两台服务器上的用的 iis 部署的,1 个接口返回 access-control-allow-headers:* 一个返回的是 access-control-allow-headers: 对应域名(这个正常调用),返回 * 的 但我开发的时候就碰到跨域了,就要求隔壁组返回和第一个请求一样的说 * 新浏览器不行了,但他们给我演示他们的项目(vue2)就不会跨域, 现在不解的有几个地方:

    1. 他们的 vue2 不跨域,我 vue3 跨域(应该关系不大),我以为是 vue3 原因,开发时使用本地代理开发的
    2. 现在部署后端用 tomcat 部署的,还是提档跨域
    3. 他们的线上项目(Kestrel 部署) 我也看了 确实不跨域
    4. 我以为是新版浏览器的原因 ,但我用我浏览器打开他们的项目也不跨域
    5. 现在他们说修改 怕影响线上其它项目
    第 1 条附言  ·  15 天前
    补充 1 点: 隔壁的业务是公共的接口,现在返回 * 他们其它业务正常使用, 我去调用提示跨域(开发 vite3 提示,部署 tomcat 也提示)
    第 2 条附言  ·  15 天前
    25 楼已解决 结帖
    34 条回复    2024-11-26 23:04:28 +08:00
    laobobo
        1
    laobobo  
       15 天前
    给出信息不够,猜测还是 header 配置问题,仔细对比一下。
    USDT
        2
    USDT  
       15 天前   ❤️ 1
    和框架没关系哈,带 cookie 的 CORS 不允许写*,所以要后端老老实实写 access-control-allow-origin: $request_origin 就好

    所以一般来说想跨域后端无脑写传过来的 origin 是最保险的,当然如果确定不会用到 cookie 写*最简单粗暴
    zsj1029
        3
    zsj1029  
       15 天前
    把你的代码扔到他的容器去跑,或者同域名地址
    否则就让加头允许
    bzw875
        4
    bzw875  
       15 天前
    [access-control-allow-headers: 对应域名] 不认识英文吗,headers 为什么放域名?
    配置 [*] 就行
    以 vite 为例代理服务器请求要转发 header
    server: {
    proxy: {
    '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
    onProxyReq: (proxyReq, req, res) => {
    proxyReq.setHeader('X-Custom-Header', 'custom-value');
    },
    },
    },
    },
    liudewa
        5
    liudewa  
    OP
       15 天前
    @bzw875 #4 你这是代理
    liudewa
        6
    liudewa  
    OP
       15 天前
    @USDT #2 你这是 nginx 吧 现在隔壁组返回的 * 关键他们的业务 能用 不同的域名
    liudewa
        7
    liudewa  
    OP
       15 天前
    @zsj1029 #3 加了 * 他们级的业务都正常使用,(不同服务器的),我调用 出现跨域了 浏览器报 * 不能用
    Xu3Xan89YsA7oP64
        8
    Xu3Xan89YsA7oP64  
       15 天前
    也别让他们改了,自己去适配吧。搭个 BFF 透传,或者让你们的后端透传一下
    liudewa
        9
    liudewa  
    OP
       15 天前
    @laobobo #1 他们组的业务(本地开发和线上的) 正常使用
    liudewa
        10
    liudewa  
    OP
       15 天前
    @shizhibuyu2023 #8 简单问题复杂化了吧
    Xu3Xan89YsA7oP64
        11
    Xu3Xan89YsA7oP64  
       15 天前
    @liudewa #10 看了下你补充了这些接口是公共接口,那就让隔壁组搞定啊,帮他们看看 Access-Control-Allow-[Origin | Headers | Method] 这几个头哪个有问题。你又不发出来,这里的人谁知道啊
    klo424
        12
    klo424  
       15 天前   ❤️ 1
    注意解题思路。

    首先,把你跨域的错误信息,原封不动的贴出来。

    其次,他们 vue2 不夸域,就把他们请求的代码贴出来,再把你 vue3 自己的代码贴出来,让大家做个对比。

    然后,确定 vue2 和服务端 iis 是否在同一个项目/容器内,你 vue3 与服务端是否在同域。

    最后,要完整的跨域配置,毕竟跨域不止 access-control-allow-headers 这一个配置。
    Niphor
        13
    Niphor  
       15 天前
    如果请求中携带了身份信息,也就是 Cookie ,不能使用 *
    liudewa
        14
    liudewa  
    OP
       15 天前
    liudewa
        15
    liudewa  
    OP
       15 天前
    @klo424 #12 好的哥 14 楼
    liudewa
        16
    liudewa  
    OP
       15 天前
    @shizhibuyu2023 #11 14 楼
    liudewa
        17
    liudewa  
    OP
       15 天前
    @liudewa #14 下面是正常的 也是两个不同端口, 上面是我的提示跨域的,预检测就没过去
    liudewa
        18
    liudewa  
    OP
       15 天前
    @Niphor #13 我们都是 header 里面的 token 没用 cookie
    Nosub
        19
    Nosub  
       15 天前 via iPhone   ❤️ 1
    CORS 的实现原理以及 Spring 实战
    https://nosub.net/posts/p/165
    liudewa
        20
    liudewa  
    OP
       15 天前
    @laobobo #1 14 楼放了
    fov6363
        21
    fov6363  
       15 天前
    @liudewa #17

    发送请求时,有一个 withCredentials 的设置,如果需要携带 cookie 过去,那么仅设置 * 是不可以的,必须是你的 host:port ,是不是你调用这两个不同的 API ,这个参数不一样?

    而且都是 ip 地址?这只是本地环境吧,如果只是本地环境有这个问题,自己加一层代理得了
    fov6363
        22
    fov6363  
       15 天前   ❤️ 1
    @fov6363 补充一下 Cookie 也有一个 same-site + Secure 的设置会影响到跨域的问题,可以看一下 cookie 的设置
    shadowyue
        23
    shadowyue  
       15 天前   ❤️ 1
    这个帖应该能解答你所有的问题。
    https://www.v2ex.com/t/1056504
    草台班子理论永不过时。
    liudewa
        24
    liudewa  
    OP
       15 天前
    @fov6363 #21 我本地能代理, 现在放线上有问题了 我们都是用的 ip 内部使用的
    toy007
        25
    toy007  
       15 天前   ❤️ 2
    报错提示很明了了,cridentials 模式是 include 的时候,Access-Control-Allow-Origin 不能是 *

    假设你用的是 axios ,设置 withCredentials 为 false
    yhxx
        26
    yhxx  
       15 天前
    《提问的智慧》

    2 楼就已经很清晰的给出原因了,为啥还能扯这么多层啊
    liudewa
        27
    liudewa  
    OP
       15 天前
    @toy007 #25 感谢 我以为这个要给 true 这个影响 cookie 但我们不用 cookie 我修改为 false
    abcde123456789
        28
    abcde123456789  
       15 天前   ❤️ 1
    [img][/img]

    也不排除是这个问题
    liudewa
        29
    liudewa  
    OP
       15 天前
    @yhxx #26 2 楼是后端设置跨域,我这个是前端导致的
    liudewa
        30
    liudewa  
    OP
       15 天前
    @toy007 #25 我扔给 gpt 他们给了 原生的方法 xhr.withCredentials = true 我没仔细看
    yhxx
        31
    yhxx  
       15 天前   ❤️ 1
    @liudewa 2 楼和 25 楼说的是同一个问题啊。。。
    tarasha
        32
    tarasha  
       15 天前
    借楼问下,本地打开 html 文件的那种请求头 origin:null ,应该怎么办?
    liudewa
        33
    liudewa  
    OP
       15 天前   ❤️ 1
    @yhxx #31 仔细看了下是的 还是不熟悉 withCredentials 是设置 cookies 的
    oneisall8955
        34
    oneisall8955  
       15 天前
    月经
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   854 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 21:01 · PVG 05:01 · LAX 13:01 · JFK 16:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.