跨域请求错误的原因及处理方法CORS报错信息；今天我们将讨论跨域问题的原因和解决方法。如果没有遇到过跨域请求，可以尝试在浏览器的控制台页面输入如下代码：constxhr=newXMLHttpRequest()xhr.onreadystatechange=()=>{if(xhr.readyState===4){console.log(xhr.status===200?xhr.responseText:'error')}}xhr.open('GET','https://google.com')xhr.send()这段代码浏览通过调用浏览器的XMLHttpRequest向Google发送请求，结果如图：这就是跨域请求问题。当请求通过JavaScript发送到不同的源时，请求的响应将被浏览器拦截而不交给JavaScript。处理。这里的“异源”是指只要目标资源的域、协议或端口中的任何一项与当前网页不同，就认为是异源。例如下面的例子：假设当前用户在：https://example.com:[?]https://example.com/test->samedomain[?]https://m.example.com->不同的域[?]https://example.com:3000->端口不同[?]http://example.com->通信协议不同。明白了什么是跨域，那么浏览器为什么要请求跨域资源呢？拦截呢？其实这是在考虑用户的信息安全。假设小黑是恶意开发者，他写的网站会尝试通过XHR到达百度、微博等目标网站；要获取的数据。再想想，如果目标网站换成Email、银行、电商，如果没有浏览器限制跨域请求的保护，恶意开发者就可以为所欲为。注意：虽然跨域请求会被浏览器拦截，但拦截的是响应（Response）而不是请求（Request）。解决方案跨域请求的解决方案有很多，比如JSONP，即通过img、script等不受跨域限制的HTML标签，然后指定一个回调函数将响应的内容接口返回给JavaScript；或者通过iframe，绕过跨域保护获取目标资源等。下面只介绍两种常见且比较正规的解决方案。1、CORS最标准正确的解决方案是通过W3C规范“Cross-OriginResourceSharing(CORS)”，通过服务器在HTTP头中的设置，浏览器可以从不同来源获取资源。在CORS规范中，明确定义了跨域访问控制的运行方式。首先，服务端需要在响应头中添加Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers等设置，限制服务端可以接受的来源和请求方式.、便携头等。浏览器发送资源请求时，如果是简单请求，则直接发送请求；如果不满足上述条件，则通过preflight请求敲门确认是否可以通过服务器的限制，然后再发送正式请求。除了以上内容，CORS还有cookies如何传输，cookies如何允许跨域写入等信息。2.代理服务器由于CORS的header设置在服务器端，如果服务器是你的自己的，可以方便的调整服务器设置，让前端获取必要的资源；但是如果你请求外部API，你不能CORS错误，请其他人修改header设置。简单暴力的方法就是使用代理服务器帮我们获取资源；由于跨域保护的限制是浏览器规范，只要不是通过浏览器发送请求，自然不会有任何限制。一种常见的做法是使用nginx作为简单的反向代理；比如你自己的开发环境，前后端分离架构，前后端服务分别启动在3000和5000端口，你可以这样配置：server{listen3000;服务器名称本地主机；location^~/api{proxy_passhttp://localhost:5000;}}当前端需要发送API请求时，可以直接请求localhost:3000/api/...，这个请求会被nginx拦截并转发到后端localhost:5000，这样就可以轻松绕过跨域保护。综上所述，跨域是前端常见的需求，CORS报错信息也是我们容易卡住的地方；其实只要知道CORS规范中的HTTP头设置，并在服务器端进行相应的调整，就可以顺利完成跨域ask。
