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

[mbeoliero123]

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

[Track13]

你好像完全不了解跨域。响应头是添加在被请求的哪一方上面。

[knightgao2]

问问 AI 吧，槽点太多

[JustGoGoGO]

先试着看看相关技术资料？
跨源资源共享（ CORS ）| MDN Web Docs
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

[mbeoliero123]

@Track13 #1 后端返回加上了跨域的 response header ，但是请求压根没到后端

[Track13]

@mbeoliero123 那你把地址发出来看看。

[shintendo]

@mbeoliero123 跨域又不拦你发送

[mbeoliero123]

@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]

你用 firefox 把 about:config 的 block_active_content 关掉试试

[cat]

你部署在 vercel 上然后直接请求 IP ？？？还是 8888 端口？？？

[mbeoliero123]

@cat #9 是的，哥，没有域名，只能通过 ip 请求了😂

[cat]

@mbeoliero123 谁告诉你 vercel 允许你通过 IP 请求的，谁告诉你还可以自定义端口号的，再说了 vercel 不是有分配 *.vercel.app 的域名么，你这都不知道从哪吐槽起

[renmu]

https 不让访问 http 接口，关掉浏览器的不安全访问

[mbeoliero123]

@cat #11 意思是后端也部署到 vercel ？数据库怎么办，抱歉第一次用 vercel

[cat]

@mbeoliero123 等等，好像喷错了。

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

你可以在 vercel 上部署一个后端接口，前端去请求这个接口、这个接口再把请求转发到你原本的后端服务器，这样既解决了 https 的问题，也解决了跨域的问题

[mbeoliero123]

@renmu #12 这里应该是 vercel 不让访问 http 吧，跟本地的浏览器设置应该没关系

[cat]

@mbeoliero123 https 的页面不能请求 http 接口，这是浏览器的限制，而 vercel 是强制 https 的，所以都有关系

[mbeoliero123]

@cat #16 OK ，感谢大佬，我研究下怎么用 vercel 部署后端接口

[cat]

@mbeoliero123 如果你是纯前端的 vue 项目会比较麻烦，如果是 nuxt 就非常简单了

[okakuyang]

一看就是 https 请求 http ，请求还在浏览器，都没发出去

[thoo61871]

最省事的，Serverless Functions 来创建一个代理 API ，将请求转发给你这个后端接口就好了。

[Ranhao]

我的建议是直接 vercel 转发到后端接口

[mbeoliero123]

@cat #18 nuxt 和 next 都有 server 层，直接在 server 层转发就行吗？我现在想的是起个 python fastapi 服务，接收到请求就往 ip 发，拿到响应再返回

[Ranhao]

加个 vercel.json
```
{
"routes": [
{ "src": "/api/(.*)", "dest": "http://xxxxxx/$1" }
]
}
```

[mbeoliero123]

@Ranhao #21 大佬，是 20 楼说的这个方法吗
@thoo61871 #20 我研究下这个，感谢

[cat]

@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]

不是同一个，原理是一样的
20 的是要自己通过 Serverless Functions 写代码，代理请求。
21 的是可以通过 routes 配置，实现代理，类似你 vue 本地开发时的 dev proxy 。

[mbeoliero123]

@cat #25 ok 我试试

[Ranhao]

routes 不是返回重定向响应的么
==========================
@cat 不是，我之前配置一个代理到 tg 的都没问题，还运行得好好的，就是流量别大，可能不太符合 vercel 政策

[mbeoliero123]

@Ranhao #28 我这好像不行
{
"routes": [
{
"src": "/admin/(.*)",
"dest": "http://124.220.21.162:8888/$1"
}
]
}

[Ranhao]

@mbeoliero123 请求别请求 ip+port ，直接请求 /admin/login

[cat]

@Ranhao 现在应该是 rewrites 写法了，我看文档是有这样一个例子：

{
"rewrites": [
{
"source": "/proxy/:match*",
"destination": "https://example.com/:match*"
}
]
}

[Ranhao]

不要用 rewrites ，rewrites 是重定向，routes 才是代理，是 v2 配置的写法，现在还生效

[Ranhao]

@cat 这个 https://github.com/nuxt/vercel-builder/blob/main/examples/basic/vercel.json

[SunsetShimmer]

这个其实是个“搜索引擎是你的朋友”或者“去问 LLM”级别的问题...
既然上 Vercel 了，后端最好还是用个 CDN 套一下。