Cors解决跨域设置

最新推荐文章于 2024-10-29 17:57:27 发布

nanling0220

最新推荐文章于 2024-10-29 17:57:27 发布

阅读量1.8k

点赞数

分类专栏：前后端交互

本文链接：https://blog.csdn.net/nanling0220/article/details/105499211

版权

这篇博客探讨了浏览器的同源策略导致的跨域问题及其原因，指出只有特定类型的请求会被拦截。同源策略是浏览器的核心安全功能，限制了不同源之间的交互。文章通过代码示例解释了如何进行非跨域和跨域请求，并详细介绍了CORS（跨域资源共享）机制，强调CORS需要浏览器和服务器的支持，并指出在CORS通信中，浏览器会自动处理额外的头信息和可能的预检请求，对开发者来说代码编写与同源请求一致。

摘要由CSDN通过智能技术生成

在这里插入图片描述
一：为什么CORS会有跨域问题
　　跨域问题的出现，是因为浏览器的同源策略对ajax请求进行阻拦了，但是并不是所有的请求都给做当做跨域，；像是一般的href属性，a标签什么的都不进行拦截

二.什么是同源策略
　　同源策略是一种约定，它是浏览器最核心也会是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

它约定请求的url地址，必须与浏览器的url地址处于同域上，也就是域名，端口，协议都相同。

如果不同，就会报错：

我们可以看一下如何请求非跨域，同源以及请求非同源，跨域

代码演示如下：

<body>
    <button class="btn1">请求非跨域、同源</button>
    <button class="btn2">请求非同源，跨域</button>
</body>

<script>
    document.querySelector(".btn1").onclick = function(){
   
        let xhr = new XMLHttpRequest();
        xhr.open("post","/p