nodejs——解决跨域问题

梦蓝星海

已于 2022-10-10 15:32:19 修改

阅读量5.4k

点赞数 2

分类专栏：案例集结文章标签：前端 javascript

于 2022-10-10 08:41:14 首次发布

本文链接：https://blog.csdn.net/ffghcgg/article/details/127235215

版权

1什么是跨域

2解决

1 jsonp(缺点：不能请求post请求）

1 index.html页

2 proxy.js页面搭建一个服务器（写好代码后，在cmd上启动）

3效果

2服务端代理

（由于后端请求不受浏览器同源策略影响，将前端跨域请求放在后端）

1下载 http-proxy-middleware （提前下载nodejs, 再在cmd下载~）

2** proxy.js页面搭建一个服务器（写好代码后，在cmd上启动）

3index.html 页面

4效果

1什么是跨域

当一个网站中的所有请求中有的请求的协议、域名、端口号与本网站的协议、域名、端口号不一致

此时就跨域了

跨域受浏览器的同源策略限制

2解决

1 jsonp(缺点：不能请求post请求）

1 index.html页

怎么解决跨域(面试题)

方式1: 使用jsonp 解决跨域(最大弊端:不能请求post 请求)

第一步: 动态创建一个script

第二步: 给script 标签设置src 属性, 值就是请求的接口地址

注意: 请求的地址上必须在额外的传递一个参数例如: 接口地址url?参数1=val1&参数2=value2&callback=fn

第三步: 将该script 标签添加到页面中,这样浏览器加载script 标签,请求对应的src 地址, 相当于发起了一个请求,

将参数传递给后端,后端接收该请求地址的参数, 获取参数1 参数2,参数callback,后端然后调用 callback 对用的函数 fn(数据)

前端定义的fn 函数被后端调用执行, 参数就是后端传递的数据

<body>
    <button>点击发送请求</button>

</body>

</html>
<script>


// 1jsonp跨域

    let Btn = document.querySelector('button')
    // 第四步:
    function fn(data) {
        // data 就是接收到的数据(后端返回的数据)相当于xhr.responseText
        console.log(data);
    }
    Btn.onclick = function () {

        // 方式1
        // 第一步:
        let script = document.createElement('script');
        // // 第二步: 
        script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + 100 + '&cb=fn';
        // // 第三步:
        document.body.appendChild(script);
    }

</script>