admin管理员组文章数量:1529447
1. CORS跨域资源共享 与JSONP对比更有优势,无请求方式的局限性(post、get均可)。
方法:
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
2. 谷歌浏览器关闭CORS策略:
在Chrome的快捷方式后面加:–args --disable-web-security --user-data-dir 然后打开这个快捷方式
高版本浏览器在末尾添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData
c盘创建MyChromeDevUserData文件夹
3. http proxy代理跨域(利用Webpack配置):推荐使用。 代码如下
“proxy”: {
“/”: {
“target”: “http://localhost:3003”,
“ws”: true,
“changeOrigin”: true,
“secure”: false
}
}
proxy的配置
1.左边“/”代表:/ 字符后的链接都会被代理
2.“target”:代理到的地址 这里是我们json-server设置的 localhost:3000
3.”ws”:ws协议 不开启的话会报一个错误
4.”changeOrigin”:是否支持跨域 这里也是要打开的 因为端口号不同 跨域了
5.“secure”:安全协议 主要针对https的
优点:只需要在webpack.config.js文件中进行相关配置,无需其它编码,操作简单。
4. JSONP
——根据“script”标签发送请求时不存在跨域问题,在“script”标签中发送相关请求
原理:①客户端在script标签中发送相关请求,并同时传递一个函数func;
②服务器端接收请求后,将准备好的数据data以“func(”+data+")“的形式发送给客户端
③客户端接收到“func(”+data+”)"相关处理后,即执行函数func(data)
注意:由于JSONP基于script标签,因而只能处理get请求、无法处理post请求。
例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>唐僧洗头用飘柔</title>
<style>
#content{
min-height: 60px;
}
</style>
</head>
<body>
<button id="btn">获取数据</button>
<textarea id="content"></textarea>
<script>
let abtn = document.getElementById('btn');
var head = document.getElementsByTagName('head')[0];
abtn.onclick = function () {
let scr = document.createElement('script');
scr.src='https://www.baidu/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=%E5%94%90%E5%83%A7&req=2&csor=2&pwd=%20&_=1610461660265&cb=fuc';
head.appendChild(scr);
document.getElementById('content').innerText = '1'
};
function fuc(res){
let data = [];
res.g.map((item)=>{
data.push(item.q)
})
document.getElementById('content').innerText = data.join(',');
}
</script>
</body>
</html>
效果图
5. nginx反向代理
客户端发送的请求不是直接到达目的服务器,而是到达部署在目的服务器端的代理服务器,通过代理服务器转发接口请求,通过一定的转发规则将接口请求转发到目的服务器。
原理:
① 发送请求访问8081.max,通过本地host文件域名解析,找到192.168.72.49服务器(安装nginx)
② nginx反向代理接受客户端请求,找到server_name为8081.max的server节点,根据proxy_pass对应的http路径,将请求转发到端口号为8081的tomcat服务器。
前端发送请求时跟非跨域时一致,只需要在服务器端安装、配置nginx相关。
server {
listen 3000;
server_name localhost;
#将所有localhost:3000/为开头的请求转发
location / {
proxy_pass http://localhost:3001; //反向代理
index index.html index.htm;
#下面这两条配置,意思是将http头转发给后端以拿到客户端IP地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
版权声明:本文标题:浏览器解决跨域的5种方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726723578a1082017.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论