CORS如何设置多域名

前言

CORS指的是跨域资源共享，通常情况下，如果一个域名下的页面想要访问另一个域名的资源，如图片、文本、音频或视频等，就会出现跨域问题。因此，Web应用程序需要一种机制来允许跨域请求资源。而CORS就是一种解决方案，它允许服务器在响应头中声明哪些资源可以被特定的源站访问。在实际应用场景中，很多Web应用都需要跨域使用资源，此时需要设置CORS来允许多个域名访问资源。

第一段：前端设置

前端设置主要包括AJAX请求和Image资源请求两种情况。首先看AJAX请求情况，使用XMLHttpRequest对象，需要在请求头中添加Access-Control-Allow-Origin。

var xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=function() {
  if (xmlHttp.readyState==4 && xmlHttp.status==200) {
    console.log(xmlHttp.responseText);
  }
};
xmlHttp.open("GET", "http://example.com/data.json", true);
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8080");
xmlHttp.send();

而对于Image资源请求，需要在HTML代码中用img标签设置crossorigin属性，并在服务器端设置Access-Control-Allow-Origin。

<img src="http://example.com/image.jpg" crossorigin="anonymous">

第二段：服务端设置(nginx)

服务端设置CORS需要在响应头中添加Access-Control-Allow-Origin，对于nginx服务器，可以在配置文件中添加以下内容：

location / {
  add_header Access-Control-Allow-Origin http://example.com;
  add_header Vary Origin;
}

第三段：服务端设置(Apache)

对于Apache服务器，可以在.htaccess文件中添加以下内容：

  Header set Access-Control-Allow-Origin "http://example.com"
  Header set Vary "Origin"

第四段：总结

CORS技术是解决跨域问题的重要手段之一，开发者需要在前端和服务端都进行设置。在前端中，通过AJAX请求头或img标签的crossorigin属性来设置；在服务端中，在响应头中添加Access-Control-Allow-Origin并设置响应类型。通过以上代码示例，可以更好地理解CORS如何设置多域名。