怎么夸一个网站开发公司,深圳建设银行网站,怎么样做外贸网站,赣州网站推广公司电话问题场景
自定义 header#xff0c;导致跨域问题 一个大屏项目#xff0c;设置请求接口获取数据时#xff0c;有的接口能够正常返回数据#xff0c;有的接口提示跨域#xff08;接口域名不同#xff09;#xff0c;后端也进行支持跨域设置#xff0c;结果还是提示跨域…问题场景
自定义 header导致跨域问题 一个大屏项目设置请求接口获取数据时有的接口能够正常返回数据有的接口提示跨域接口域名不同后端也进行支持跨域设置结果还是提示跨域 通过测试发现使用Axios直接请求没有产生跨域对比代码发现请求拦截器添加了一个自定义header去掉就正常了 问题原因是自定义header后端配置应该也有问题导致的 该问题是使用方式一处理的
方式一前端处理去掉自定义 header方式二后端处理Access—Control-Allow-Headers 配置中添加自定义 header或改成*
使用chrome访问本地地址是提示跨域 2.1 控制台报错 The request client is not a secure context and the resource is in more-private address space private
方式一使用火狐浏览器方式二配置chrome 在地址栏中输入chrome://flags/ 找到 Block insecure private network requests.选项设置为Disabled 找到 Insecure origins treated as secure 选项设置为 Enabled同时设置访问地址如http://192.169.16.200:8088
2.2 控制台报错Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 后端设置Access-Control-Allow-Origin
总结---------------------------------------------------------------------------------------------------------------
跨域是什么
是浏览器本身的安全策略产生的问题 当访问网页的域与页面内调用接口的域不一致域不一致包含协议、域名、端口号不一致就会产生跨域问题
跨域方案
JSONP 方案
利用 script 标签没有跨域限制的漏洞网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。 // 跨域加载资源标签
img srcXXX
link hrefXXX
script srcXXX!-- 前端代码 --
function jsonp(req) {let script document.createElement(script); // 创建一个script标签let url req.url ?callback req.callback.name; // 拼接urlscript.src url; // 设置script标签的src属性document.getElementsByTagName(head)[0].appendChild(script); // 将script标签添加到head标签中
}function sayHello(res) {console.log(hello, res.data);
}
jsonp({url: http://localhost:3000,callback: sayHello
})
!-- 后端代码 --
const http require(http);
const urllib require(url);const port 3000; // 定义端口const server http.createServer((req, res) {let params urllib.parse(req.url, true); // 解析urllet callback params.query.callback; // callback是函数名解析出来if (callback) {let data { data: 我就是你要的数据 }; // 定义要向前端返回的数据res.end(callback ( JSON.stringify(data) )); // 相应数据callback(参数)的形式}
})server.listen(port, function () {console.log(jsonp server is on);
});CORS CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。 postMessage 与 message 事件 window 与 iframe 之间通信 !-- 通过 postMessage 发送信息到指定位置数据 --
otherWindow.postMessage(message, targetOrigin, [transfer]);
!-- 通过 message 事件接收数据 --
window.addEventListener(“message”, dealMessage, false);websocket 前后端使用 websocket 技术进行数据传递 Node 中间件代理二次跨域 实现原理同源策略是浏览器需要遵循的标准而如果是服务器向服务器请求就无需遵循同源策略。 Nginx 反向代理 类似 Node 中间件代理
