http跨域问题

最新推荐文章于 2024-03-10 15:41:33 发布

胡小葵

最新推荐文章于 2024-03-10 15:41:33 发布

阅读量574

点赞数

文章标签： http javascript 前端

本文链接：https://blog.csdn.net/m0_48860371/article/details/126966530

版权

同源策略

是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，
不能读写对方资源。所谓同源是指"协议+域名+端口"三者都相同。
如下同源：
http://www.baidu.com/index.html
http://www.baidu.com/index.css

跨域

使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。

注：localhost和127.0.0.1虽然都指向本机，但也属于跨域

跨域错误：–端口不同

跨域解决思路

不使用 AJAX技术(XMLHttpRequest)请求—用jsonp技术
授权跨域资源共享CORS
使用代理服务器

JSONP技术

不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，
比如我们有可能使用一个网络上的图片，就可以请求得到，<img src="https://ss3.baidu.com/aa.jpg/>

jsonp就是使用同源策略这一“漏洞”，实现的跨域请求。

其基本原理：
是利用HTML的

1、jsonp技术实现

jsonp技术利用script标签天生可以跨域特点解决跨域问题
代码动态创建script标签，将请求url地址作为script标签src属性值
jsonp需要服务端支持
把真正的数据封装到一个函数中一起返回
{code:1,info:‘helloworld’}
callback({code:1,info:‘helloworld’})

后端：

前端：

 <script>
 <!-- <script src="http://10.7.162.67:3000/"></script> -->
        sendProductList('http://10.7.162.67:3000')
        function sendProductList(url){
            let scriptEle = document.createElement('script') // <script>
            scriptEle.setAttribute('src',url)
            document.body.appendChild(scriptEle)
        }
        
        function callback(res){
            let resObj = JSON.parse(res)
            console.log(res)
            console.log(resObj)

        }
    </script>