方法一:一般vite是可以配置跨域代理的,这个时候就不需要后端配合设置跨域了

在.env.development 文件配置

# vite 本地跨域代理
VITE_PROXY=[["/basic-api","http://localhost:3000"]]
# 接口地址
VITE_GLOB_API_URL=/basic-api

由于 /basic-api 匹配到了设置的 VITE_PROXY,所以上方实际是请求 http://localhost:3000/login,这样同时也解决了跨域问题。(3100为项目端口号,http://localhost:3000为PROXY代理的目标地址)

方法二:后端设置跨域,这样前端就不需要做操作了

当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用

        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
        add_header Access-Control-Allow-Headers *;

还需要注意,如果使用的axios,并且需要携带浏览器的cookie等信息时,前端不仅需要开启withCredentials:true,参考文章1参考文章2。此时后端设置配置需要额外注意:

add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐