vue跨域问题处理

当vue项目和后端接口不在同一服务器时、不同协议、端口号、域名会产生跨域问题,跨域问题存在于客户端和服务端,服务端与服务端之间不存在跨域,这是因为浏览器存在同源策略限制,同源策略指的是浏览器安全策略,禁止跨域访问,处理方式如下
1.Vue.conf.js文件配置

2.request.js

3.nginx反向代理配置
location / {
root /data/xjindex/dist;
try_files uriuri/ /index.html;
index index.html index.htm;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

}

location /api/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://10.0.0.108:9020/;//匹配以api开头的路径,替换成后端接口地址(http://10.0.0.108:9020/)
}
posted @   Fyy发大财  阅读(330)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示