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
        }


相关文章
|
28天前
|
移动开发 JSON JavaScript
|
1月前
|
域名解析 网络协议 前端开发
浏览器输入域名网址访问后的过程详解
1、以91处理网为例,客户端浏览器通过DNS解析到www.91chuli.com,IP地址是202.108.22.5,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到202.108.22.5,然后通过TCP进行封装数据包,输入到网络层。
67 2
|
1月前
|
Web App开发 API Windows
取接口访问者信息[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"}。详情见官网文档。
|
2月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
3月前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
4月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
4月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
1125 1
|
4月前
Edge——如何打开IE浏览器进行访问
Edge——如何打开IE浏览器进行访问
76 4
|
5月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
140 3
|
5月前
|
移动开发 JSON JavaScript
浏览器跨域
浏览器跨域