面试题答案
一键面试跨域问题产生的原因
浏览器的同源策略限制。同源指的是协议、域名、端口都相同。当一个请求的源（协议 + 域名 + 端口）与当前页面的源不同时，就会触发跨域问题。这是浏览器为了安全考虑，防止恶意网站通过脚本获取其他网站的数据。例如，一个在 http://example.com 页面中的脚本，不能向 http://other.com 发起 AJAX 请求，因为它们的域名不同。
常见跨域解决方案及其优缺点和适用场景
1. JSONP
- 原理：利用
<script>标签没有跨域限制的特性，通过动态创建<script>标签，请求一个带参数的跨域接口，并指定回调函数来处理返回的数据。 - 优点：兼容性好，可在古老浏览器中使用，实现简单。
- 缺点：仅支持 GET 请求，安全性较低，易受 XSS 攻击，因为 JSONP 是通过在页面中插入脚本标签来获取数据，恶意脚本可能会被注入。
- 适用场景：适用于一些简单的、对安全性要求不高的数据获取场景，例如获取第三方的天气数据、新闻数据等展示类场景。
2. CORS（跨域资源共享）
- 原理：服务端通过设置响应头来允许跨域请求。主要的响应头有
Access-Control-Allow-Origin（指定允许跨域的源，可以是具体域名或*代表所有源），Access-Control-Allow-Methods（指定允许的请求方法，如 GET、POST 等），Access-Control-Allow-Headers（指定允许的请求头）等。浏览器在发送请求时，如果是简单请求（如 GET、POST 且 Content-Type 为 text/plain、multipart/form-data、application/x-www-form-urlencoded 之一），会直接发送；如果是非简单请求（如 PUT、DELETE 等方法或自定义请求头），会先发送预检请求（OPTIONS），服务端返回正确的响应头后，才会发送实际请求。 - 优点：支持各种请求方法，安全性较高，在现代浏览器中兼容性良好。
- 缺点：需要服务端进行配置，对旧版本浏览器兼容性略差（但基本主流浏览器都支持）。
- 适用场景：适用于各种前后端分离的项目，尤其是对安全性要求较高、需要多种请求方法的场景，如用户登录、数据提交等。