当前位置: 首页 > news >正文

前端Vue项目处理跨域请求问题解决方案(后端未加cors),前端调后端

vue.config.js中加,自己修改后端服务服务器地址和端口号
 

module.exports = {devServer: {port: 80,https: false,open: true,proxy: {"/test": {  // 代理标识(匹配以 /test 开头的请求)target: "http://xxx",  // 目标服务器地址changeOrigin: true,                   // 允许跨域pathRewrite: {"^/test": ""  // 去掉请求路径中的 /test 前缀}}},disableHostCheck: true}
}

api文件夹下的index.js或你命名的api.js文件修改你请求的接口地址为,xxx是域名端口后的后台接口地址:

export function get_data(data) {return request({url: `/test/xxx`, //xxx是域名端口后的后台接口地址method: "get",params: data,               // 保留参数传递timeout: 50000,});
}

但以上仅限于在开发环境中解决跨域和同源策略阻挡问题,前端项目打包部署nginx时,还需要在nginx的conf文件中配置反向代理,把所有原本直接请求 http://xxx.com 你自己后端服务器服务的代码,改为通过代理路径 /api 发起请求,从而绕过浏览器的同源策略阻挡
要在前端部署的nginx的conf的配置文件中加上反向代理地址

location /test {proxy_pass http://xxx;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;
}


http://www.mrgr.cn/news/100455.html

相关文章:

  • Day23-Web开发——Linux
  • Java安全之cc链学习集合
  • Win11 配置 Git 绑定 Github 账号的方法与问题汇总
  • 【Spring Boot】Maven中引入 springboot 相关依赖的方式
  • C#本地使用离线ocr库识别图片中文本,工具包PaddleOCRSharp
  • pytorch学习使用
  • Pycharm(十七)生成器
  • 常用的性能提升手段--提纲
  • 【玩转 JS 函数式编程_016】DIY 实战:巧用延续传递风格(CPS)重构倒计时特效逻辑
  • 手动实现legend 与 echarts图交互 通过元素和js事件实现图标某项的高亮 显示与隐藏
  • Android源码编译命令详解
  • 深入理解布隆过滤器:参数设定与优化
  • 论文导读 - 基于大规模测量与多任务深度学习的电子鼻系统实现目标识别、浓度预测与状态判断
  • C++ ——引用
  • 大模型应用实战:深入理解模型上下文协议 MCP
  • 2025 FIC wp
  • 关系型数据库PostgreSQL for Mac 保姆级使用教程
  • C++初阶-模板初阶
  • 计算机网络学习笔记 4-6章
  • java异常