springboot综合项目练习九前端请求后端接口跨域问题解决

本文介绍了解决跨域问题的方法,通过使用代理如proxyTable来绕过浏览器的同源策略限制,实现本地开发环境下不同域名间的资源请求。具体步骤包括修改API方法中URL的定义,配置proxyTable指向目标服务器,以及重新请求页面验证代理是否成功。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

跨域问题解决:
测试 上边的代理 ,结果 报错如下 :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access.

原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。
解决:采用代理的方式如proxyTable解决。
具体的配置如下:
1)修改api方法中url的定义,请求前加/api前缀

let apiUrl = sysConfig.xcApiUrlPre;  //将请求前缀抽取为全局变量
export const page_get = id =>{
  return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
}

2)在config/index.js下配置proxyTable

‘/api/cms’: {
target: ‘http://localhost:31001’, //以/api/cms开头的请求,代理请求http://localhost:31001
pathRewrite: {
‘^/api’: ‘’//实际请求去掉/api
}

3 )重新请求页面,会发现原先请求后端接口的 http://localhost:31001 地址变为请求 http://localhost:11000,说明http代理成功

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值