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

[求助] vue 项目 vercel 部署求助

  •  
  •   mbeoliero123 · 20 天前 · 1689 次点击

    各位佬有用过 vercel 部署吗 根据官方文档: https://vercel.com/guides/how-to-enable-cors 在项目根路径下加了 vercel.json 重新部署后,请求后端( http://ip:port/)的 api request 没有加上跨域的 header 难道是因为我请求的是 ip ?

    34 条回复    2024-11-01 17:48:00 +08:00
    Track13
        1
    Track13  
       20 天前
    你好像完全不了解跨域。响应头是添加在被请求的哪一方上面。
    knightgao2
        2
    knightgao2  
       20 天前   ❤️ 1
    问问 AI 吧,槽点太多
    JustGoGoGO
        3
    JustGoGoGO  
       20 天前
    先试着看看相关技术资料?
    跨源资源共享( CORS )| MDN Web Docs
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
    mbeoliero123
        4
    mbeoliero123  
    OP
       20 天前
    @Track13 #1 后端返回加上了跨域的 response header ,但是请求压根没到后端
    Track13
        5
    Track13  
       20 天前
    @mbeoliero123 那你把地址发出来看看。
    shintendo
        6
    shintendo  
       20 天前
    @mbeoliero123 跨域又不拦你发送
    mbeoliero123
        7
    mbeoliero123  
    OP
       20 天前
    @Track13 #5
    @shintendo #6 看起来不是跨域的问题,应该是不让访问 http 请求,必须要是 https 的
    Mixed Content: The page at 'https://player-admin-mbeoliero-mbeolieros-projects.vercel.app/login?redirect=%2F%3FvercelToolbarCode%3D6td6IaUwnjo7BNb' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://124.220.21.162:8888/admin/login'. This request has been blocked; the content must be served over HTTPS.
    epiloguess
        8
    epiloguess  
       20 天前
    你用 firefox 把 about:config 的 block_active_content 关掉试试
    cat
        9
    cat  
       20 天前
    你部署在 vercel 上然后直接请求 IP ???还是 8888 端口???
    mbeoliero123
        10
    mbeoliero123  
    OP
       20 天前
    @cat #9 是的,哥,没有域名,只能通过 ip 请求了😂
    cat
        11
    cat  
       20 天前
    @mbeoliero123 谁告诉你 vercel 允许你通过 IP 请求的,谁告诉你还可以自定义端口号的,再说了 vercel 不是有分配 *.vercel.app 的域名么,你这都不知道从哪吐槽起
    renmu
        12
    renmu  
       20 天前 via Android
    https 不让访问 http 接口,关掉浏览器的不安全访问
    mbeoliero123
        13
    mbeoliero123  
    OP
       20 天前
    @cat #11 意思是后端也部署到 vercel ?数据库怎么办,抱歉第一次用 vercel
    cat
        14
    cat  
       20 天前
    @mbeoliero123 等等,好像喷错了。

    你是前端部分部署在 vercel ,后端在别的地方?那是因为 vercel 部署的网站都是 https ,你页面上要请求后端的接口也得走 https

    你可以在 vercel 上部署一个后端接口,前端去请求这个接口、这个接口再把请求转发到你原本的后端服务器,这样既解决了 https 的问题,也解决了跨域的问题
    mbeoliero123
        15
    mbeoliero123  
    OP
       20 天前
    @renmu #12 这里应该是 vercel 不让访问 http 吧,跟本地的浏览器设置应该没关系
    cat
        16
    cat  
       20 天前
    @mbeoliero123 https 的页面不能请求 http 接口,这是浏览器的限制,而 vercel 是强制 https 的,所以都有关系
    mbeoliero123
        17
    mbeoliero123  
    OP
       20 天前
    @cat #16 OK ,感谢大佬,我研究下怎么用 vercel 部署后端接口
    cat
        18
    cat  
       20 天前
    @mbeoliero123 如果你是纯前端的 vue 项目会比较麻烦,如果是 nuxt 就非常简单了
    okakuyang
        19
    okakuyang  
       20 天前
    一看就是 https 请求 http ,请求还在浏览器,都没发出去
    thoo61871
        20
    thoo61871  
       20 天前
    最省事的,Serverless Functions 来创建一个代理 API ,将请求转发给你这个后端接口就好了。
    Ranhao
        21
    Ranhao  
       20 天前
    我的建议是直接 vercel 转发到后端接口
    mbeoliero123
        22
    mbeoliero123  
    OP
       20 天前
    @cat #18 nuxt 和 next 都有 server 层,直接在 server 层转发就行吗?我现在想的是起个 python fastapi 服务,接收到请求就往 ip 发,拿到响应再返回
    Ranhao
        23
    Ranhao  
       20 天前   ❤️ 1
    加个 vercel.json
    ```
    {
    "routes": [
    { "src": "/api/(.*)", "dest": "http://xxxxxx/$1" }
    ]
    }
    ```
    mbeoliero123
        24
    mbeoliero123  
    OP
       20 天前
    @Ranhao #21 大佬,是 20 楼说的这个方法吗
    @thoo61871 #20 我研究下这个,感谢
    cat
        25
    cat  
       20 天前
    @Ranhao

    routes 不是返回重定向响应的么?由浏览器去请求新地址,新地址是 http 的话依然会被 block 的啊
    via: https://vercel.com/docs/projects/project-configuration#routes

    @mbeoliero123

    你不是 vue 项目吗,你管 next 干啥 😂😂 我提到 nuxt 是因为你从 vue 迁移过去会比较简单
    如果不想迁移,可以直接 /api 目录下放个文件,就是楼上说的 Functions 的玩法
    参考: https://vercel.com/docs/functions#vercel-functions
    Ranhao
        26
    Ranhao  
       20 天前
    不是同一个,原理是一样的
    20 的是要自己通过 Serverless Functions 写代码,代理请求。
    21 的是可以通过 routes 配置,实现代理,类似你 vue 本地开发时的 dev proxy 。
    mbeoliero123
        27
    mbeoliero123  
    OP
       20 天前
    @cat #25 ok 我试试
    Ranhao
        28
    Ranhao  
       20 天前
    routes 不是返回重定向响应的么
    ==========================
    @cat 不是,我之前配置一个代理到 tg 的都没问题,还运行得好好的,就是流量别大,可能不太符合 vercel 政策
    mbeoliero123
        29
    mbeoliero123  
    OP
       20 天前
    @Ranhao #28 我这好像不行
    {
    "routes": [
    {
    "src": "/admin/(.*)",
    "dest": "http://124.220.21.162:8888/$1"
    }
    ]
    }

    Ranhao
        30
    Ranhao  
       20 天前
    @mbeoliero123 请求别请求 ip+port ,直接请求 /admin/login
    cat
        31
    cat  
       20 天前
    @Ranhao 现在应该是 rewrites 写法了,我看文档是有这样一个例子:

    {
    "rewrites": [
    {
    "source": "/proxy/:match*",
    "destination": "https://example.com/:match*"
    }
    ]
    }
    Ranhao
        32
    Ranhao  
       20 天前
    不要用 rewrites ,rewrites 是重定向,routes 才是代理,是 v2 配置的写法,现在还生效
    SunsetShimmer
        34
    SunsetShimmer  
       20 天前 via Android
    这个其实是个“搜索引擎是你的朋友”或者“去问 LLM”级别的问题...
    既然上 Vercel 了,后端最好还是用个 CDN 套一下。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3012 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:16 · PVG 22:16 · LAX 06:16 · JFK 09:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.