ajax跨域主域名不同

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。跨域是指从一个源（域）请求另一个不同源的资源。当主域名不同时，浏览器出于安全考虑，会阻止这种跨域请求，这就是所谓的“同源策略”。

相关优势

1. 提高用户体验：AJAX允许网页异步加载数据，用户无需等待整个页面刷新，提高了网页的响应速度和用户体验。
2. 减少服务器负载：通过只请求需要的数据，而不是整个页面，可以减少服务器的负载。

类型

1. 简单请求：使用GET、POST、HEAD方法，且HTTP头信息不超出特定字段。
2. 预检请求：对于复杂请求（如PUT、DELETE方法，或者使用自定义头信息），浏览器会先发送一个OPTIONS请求进行预检，确认服务器允许该跨域请求。

应用场景

1. Web应用：在单页应用（SPA）中，经常需要从不同的域名加载数据，如用户认证、数据获取等。
2. API服务：前后端分离的架构中，前端通常需要从后端API获取数据。

问题及解决方法

为什么会这样？

浏览器出于安全考虑，实施了同源策略，阻止不同源之间的请求，以防止恶意脚本攻击。

原因是什么？

同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

如何解决这些问题？

1. CORS（跨域资源共享）：
   • 服务器端设置：服务器需要在响应头中添加Access-Control-Allow-Origin字段，指定允许访问的源。
   • 服务器端设置：服务器需要在响应头中添加Access-Control-Allow-Origin字段，指定允许访问的源。
   • 客户端请求：客户端正常发起AJAX请求。
   • 客户端请求：客户端正常发起AJAX请求。

• JSONP（JSON with Padding）：
  • 服务器端支持：服务器需要支持JSONP格式的响应。
  • 客户端请求：客户端使用动态创建<script>标签的方式发起请求。
  • 客户端请求：客户端使用动态创建<script>标签的方式发起请求。
• 代理服务器：
  • 服务器端设置：在前端服务器上设置一个代理，将请求转发到目标服务器。
  • 服务器端设置：在前端服务器上设置一个代理，将请求转发到目标服务器。
  • 客户端请求：客户端请求本地代理服务器。
  • 客户端请求：客户端请求本地代理服务器。

参考链接

• MDN Web Docs: CORS
• MDN Web Docs: JSONP
• Express.js Middleware: http-proxy-middleware

通过以上方法，可以有效解决AJAX跨域主域名不同的问题。