ajax跨域前端报错—前端Ajax跨域报错

什么是Ajax跨域

Ajax（Asynchronous JavaScript and XML）是一种在不重载整个页面的情况下，通过后台与服务器进行数据交互的技术。由于同源策略的限制，Ajax只能与同源的服务器进行通信。所谓同源，指的是协议、域名、端口号完全相同。如果请求的服务器与当前页面不同源，则称之为Ajax跨域。

为什么会出现Ajax跨域报错

Ajax跨域报错是因为浏览器出于安全考虑，限制了跨域请求的权限。具体来说，浏览器会在请求头中添加Origin字段，表示请求的来源，服务器会检查该字段，如果请求的来源与服务器的域名不同，则会拒绝该请求，返回一个错误响应。这就是Ajax跨域报错的原因。

如何解决Ajax跨域报错

解决Ajax跨域报错有多种方法，下面介绍两种常用的方法。

JSONP

JSONP（JSON with Padding）是一种跨域请求的技术，它利用了script标签可以跨域加载资源的特性。具体来说，JSONP通过动态创建一个script标签，将请求的URL作为script标签的src属性，然后在URL中添加一个回调函数的名称，服务器返回的数据会被包装在该回调函数中，最后在页面中定义该回调函数，就可以获取到服务器返回的数据了。

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域请求的标准，它通过在请求头中添加一些特殊的字段，告诉服务器允许跨域请求。具体来说，CORS会在请求头中添加Origin字段，表示请求的来源，服务器会检查该字段，如果请求的来源与服务器的域名相同或在白名单中，则会允许该请求，并在响应头中添加Access-Control-Allow-Origin字段，表示允许跨域请求的域名。

常见的Ajax跨域报错

下面介绍几种常见的Ajax跨域报错，并分别介绍如何解决。

Access to XMLHttpRequest at ‘ from origin ‘ has been blocked by CORS policy

这种错误是因为服务器没有设置Access-Control-Allow-Origin头，导致浏览器拒绝了跨域请求。解决方法是在服务器端设置Access-Control-Allow-Origin头，允许跨域请求的域名。

XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

这种错误与上面的错误类似，也是因为服务器没有设置Access-Control-Allow-Origin头。解决方法同上。

XMLHttpRequest cannot load The ‘Access-Control-Allow-Origin’ header contains multiple values ‘ *’, but only one is allowed.

这种错误是因为服务器设置了多个Access-Control-Allow-Origin头，导致浏览器拒绝了请求。解决方法是只设置一个Access-Control-Allow-Origin头，允许跨域请求的域名。

XMLHttpRequest cannot load Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

这种错误是因为浏览器在发送跨域请求前，会先发送一个OPTIONS请求，称为预检请求（preflight request），用于检查服务器是否允许跨域请求。如果服务器没有正确处理预检请求，会导致该错误。解决方法是在服务器端正确处理预检请求，设置Access-Control-Allow-Origin等头信息。

Ajax跨域报错是常见的前端问题，解决方法主要有JSONP和CORS两种。在使用Ajax进行跨域请求时，需要注意服务器的设置，以及浏览器的安全策略。如果遇到跨域报错，可以通过浏览器的开发者工具查看具体错误信息，并根据错误信息进行相应的处理。