学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |
💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
跨域问题指的是不同站点之间,使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。 但这个保护机制也带来了新的问题,它的问题是给不同站点之间的正常调用,也带来的阻碍,那怎么解决这个问题呢?接下来我们一起来看。
在请求时,如果出现了以下情况中的任意一种,那么它就是跨域请求:
也就是说,即使域名相同,如果一个使用的是 http,另一个使用的是 https,那么它们也属于跨域访问。常见的跨域问题如下图所示:
![image.png](https://img-blog.csdnimg.cn/img_convert/b977c8d904c843adbc4db4cc6770f4e9.png#clientId=u876be534-2679-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=284&id=u0103086f&margin=[object Object]&name=image.png&originHeight=568&originWidth=2031&originalType=binary&ratio=1&rotation=0&showTitle=false&size=164146&status=done&style=none&taskId=u59fdc010-b3e8-4437-bed4-acce3f9046a&title=&width=1015.5)
接下来,我们使用两个 Spring Boot 项目来演示跨域的问题,其中一个是端口号为 8080 的前端项目,另一个端口号为 9090 的后端接口项目。
前端项目只需要在 resources 下放两个文件,一个用于发送 ajax 请求的 jquery.js,另一个是 html 前端页面,工程目录如下图所示:
![image.png](https://img-blog.csdnimg.cn/img_convert/5d16aa32ed60d69f70084828cdc7f818.png#clientId=uea14d218-e69d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=512&id=ude20fd93&margin=[object Object]&name=image.png&originHeight=1024&originWidth=978&originalType=binary&ratio=1&rotation=0&showTitle=false&size=73459&status=done&style=none&taskId=u57e360f1-8bc2-4c55-be2f-bd9a9ee1cae&title=&width=489)
其中前端页面 index.html 的代码如下:
html>