一、Corsage基本意思
Corsage可是花冠的意思，其中CORS是Cross-Origin Resource Sharing的缩写，意为跨源资源分享。
CORS是一个浏览器安全机制，用于限制从一个源中访问另一个源中的资源。 具体来说，当您在JavaScript中向其他域发出HTTP请求时，浏览器必须第一次向该域发出OPTIONS请求以获取CORS头部信息。
二、什么是CORS错误
CORS错误是由浏览器引发的一种错误，它表明浏览器在请求资源时遵循CORS规则，并且由于安全策略未在请求头中正确设置而被拒绝。
三、CORS错误的原因和如何解决
1. 未正确设置响应标头
CORS错误由于服务器未正确设置响应标头而导致。在此处，我们需要设置CORS响应标头，以使浏览器知道我们允许哪些域访问资源。
示例代码：
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');
2.使用代理服务器
代理服务器是浏览器和Web服务器之间的一个中间层。 如果我们的代码在Web服务器上，可以使用代理服务器来减少CORS错误。
示例代码：
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "http://example.com";
fetch(proxyurl + url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
3. 使用JSONP（JSON with Padding）技术
JSONP是一种JavaScript的跨域通信技术。 它通过在请求的URL中添加一个回调函数参数来绕过CORS错误，并使用该函数来解析数据。
示例代码：
前端代码：
(function(){
const script = document.createElement('script')
script.src = 'http://localhost:9001/data.json?callback=parseData'
document.getElementsByTagName('head')[0].appendChild(script)
function parseData(data){
console.log(data)
}
})()
后端代码：
app.get('/data.json', function(req, res){
const data = {a: 'apple', b: 'banana'}
const cb = req.query.callback
if(cb){
res.send(cb + "(" + JSON.stringify(data) + ")")
} else {
res.send(JSON.stringify(data))
}
})
4. 允许使用凭证
默认情况下，如果CORS请求包含凭证（如cookies、HTTP认证或客户端SSL证书等），则它将被拒绝。为了允许使用凭证，我们需要将CORS响应标头的Access-Control-Allow-Credentials设置为true。
示例代码：
header('Access-Control-Allow-Origin: http://localhost:9000');
header('Access-Control-Allow-Credentials: true');
5. 使用Chrome插件解决CORS
如果您在使用Chrome浏览器并且不想修改服务器端配置，则可以使用跨域插件来解决CORS错误。
四、总结
我们可以通过以上几种方法来解决CORS错误。对于大多数开发人员来说，默认情况下允许所有域访问资源应该足够解决CORS问题。 但是，如果您尝试访问与您的域不同的第三方API，则可能需要使用其他方法。
