网站建设管理工作会议上的讲话,首页排名优化公司,百度做网站怎么联系,员工支付做网站的费用分录1.跨域问题产生的原因
浏览器的同源策略影响#xff0c;同源策略是一种安全机制#xff0c;它限制了一个网页中的脚本只能访问同源的资源。
跨源网络访问的三种方式#xff1a;跨域写操作#xff0c;跨域资源嵌入#xff0c;跨域读操作
2.跨域问题案例
ip和域名不一致…1.跨域问题产生的原因
浏览器的同源策略影响同源策略是一种安全机制它限制了一个网页中的脚本只能访问同源的资源。
跨源网络访问的三种方式跨域写操作跨域资源嵌入跨域读操作
2.跨域问题案例
ip和域名不一致会导致跨域问题 http默认是80,不写也不会导致跨域问题 3.img, scriptiframe标签 不存在跨域问题
跨域资源嵌入不存在跨域问题凡是从外部引入的资源css图片视频音频iframe等跨域资源嵌入的都不存在跨域问题。
跨域写操作不存在跨域问题a标签的跳转form表单的post提交等写操作也不存在跨域问题
跨域读操作存在跨域问题如ajax 就存在跨域问题
4.跨域问题的解决
4.1JSONP解决同源限制问题
原理利用script标签的src属性可以跨域加载资源的特性通过动态创建script标签来实现跨域请求。
限制
必须携带函数作为参数只能发起get请求存在安全隐患容易收到注入攻击
方式一直接script标签中请求传递参数给后端后端通过参数传送数据过来
方式二动态创建script标签设置src属性传入回调函数最后挂载到body上。后端获取到前端传递参数req.query。后端res.send()中通过模版字符串进行处理并返回json数据 !-- script srchttp://127.0.0.1:3000/api/getData?cbcallback/script --script// 动态创建script标签const script document.createElement(script)// 设置src属性script.src http://127.0.0.1:3000/api/getData?cbcallback// 接收后端的回调函数function callback(res) {console.log(res, res)}// 将script挂载到页面上document.getElementsByTagName(body)[0].appendChild(script)/script
// 定义接口
app.get(/api/getData, (req, res) {// 获取前端参数const { cb } req.queryres.send(${cb}(${JSON.stringify({code: 10000,data: {msg: hello world}})}))
}) 4.2CORS跨域资源共享——主要是后端处理
原理需要服务器实现CORS接口在服务器端设置响应头允许指定的域名访问资源。
res.header(Access-Control-Allow-Origin, *) //允许所有的请求源
res.header(Access-Control-Allow-Headers, *) //允许所有的请求源 X-Token
res.header(Access-Control-Allow-Methods, *) //允许所有的请求源 get post put delete
4.3代理服务器
原理在同源策略下通过在同一域名下设置代理服务器将跨域请求转发到目标服务器上。
