proxyTable解决浏览器的跨域访问

简介: proxyTable解决浏览器的跨域访问

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

原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。

解决:采用proxyTable解决

proxyTable是什么?

vue-cli提供的解决vue开发环境下跨域问题的方法,proxyTable的底层使用了http-proxy-

middleware(https://github.com/chimurai/http-proxy-middleware),它是 http代理中间件,它依赖node.js,

基本原理是用服务端代理解决浏览器跨域:

cms跨域解决原理:

1、访问页面http://localhost:11000/

2 、页面请求http://localhost:11000/cms

由于 url由http://localhost:31001/cms…改为 “http://localhost:11000/cms." ,所以不存在跨域

3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.

服务端不存在跨域问题

具体的配置如下:

1)修改api方法中url的定义

请求前加/api前缀

//public是对axios的工具类封装,定义了http请求方法
import http from './../../../base/api/public'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_list = (page,size,params) => {
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
}

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

以/api/cms开头的请求,代理请求http://localhost:31001

'/api/cms': {
        target: 'http://localhost:31001',
        pathRewrite: {
          '^/api': ''//实际请求去掉/api
        }


目录
打赏
0
0
0
0
23
分享
相关文章
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
106 17
使用Web浏览器访问UE应用的最佳实践
浏览器输入域名网址访问后的过程详解
1、以91处理网为例,客户端浏览器通过DNS解析到www.91chuli.com,IP地址是202.108.22.5,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到202.108.22.5,然后通过TCP进行封装数据包,输入到网络层。
126 2
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{"code":200,"ip":"175.154.88.178","browser":"Chrome","os":"Windows 10"}。详情见官网文档。
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
1534 1
|
7月前
Edge——如何打开IE浏览器进行访问
Edge——如何打开IE浏览器进行访问
96 4
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
217 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等