浏览器解决跨域的5种方法

最新推荐文章于 2024-04-29 16:58:53 发布

唐生洗发用飘柔

最新推荐文章于 2024-04-29 16:58:53 发布

阅读量1.5k

点赞数 1

文章标签： javascript jquery chrome jsonp nginx

本文链接：https://blog.csdn.net/lys1925/article/details/112312463

版权

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.com/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.com，通过本地host文件域名解析，找到192.168.72.49服务器（安装nginx）
② nginx反向代理接受客户端请求，找到server_name为8081.max.com的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;
}
}

唐生洗发用飘柔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器解决跨域的5种方法

**浏览器解决跨域**CORS跨域资源共享与JSONP对比更有优势，无请求方式的局限性(post、get均可)。方法：header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式谷歌浏览器关闭CORS策略:在Chrome的快捷方式后面加:–args --disable-web-security --user-data-dir 然后打
复制链接

扫一扫