code前端网启动Nginx进行练习：跨域CORS配置
8.跨域CORS配置
前面介绍了简单请求、非简单请求、跨域的概念。如果你还不知道，可以阅读前面的解释。 。如今，前后端分离的项目占据了主导地位。前端服务往往在本地启动，需要访问不同的后端地址。跨域问题是不可避免的。
为了解决跨域问题，让我们创建一个跨域问题。首先，按照与以前相同的方式设置您的二级域名。首先设置fe.sherl ocked93.club和be.sherl ocked93.club二级域名，都指向该虚拟服务器地址。虽然对应的IP相同，但是从fe.sherl ocked93.club域名请求访问be.sherl ocked93.club域名仍然是跨域主机访问不一致（如果你不知道为什么，请参阅之前的跨域内容）。
8.1 使用反向代理处理跨域
首页服务地址为fe.sherl ocked93.club。由此产生的跨域配置可以如下配置：
server {
listen 9001;
server_name fe.sherlocked93.club;
location / {
proxy_pass be.sherlocked93.club;
}
}
复制代码这样，所有在fe.sherl ocked93.club之前的域名请求都将被代理到3.sherl ocked93。 club，前端我们使用服务器将所有请求代理到后端地址，绕过跨域。这里的
静态文件请求和后端服务请求都是以fe.sherlocked93.club开头，很难区分。因此，为了实现统一的后端服务请求，我们通常同意添加前缀/apis/或其他路径来请求后端服务，以区别于静态资源请求。此时，我们可以这样安排：
# 请求跨域，约定代理后端服务请求path以/apis/开头
location ^~/apis/ {
# 这里重写了请求，将正则匹配中的第一个分组的path拼接到真正的请求后面，并用break停止后续匹配
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass be.sherlocked93.club;
# 两个域名之间cookie的传递与回写
proxy_cookie_domain be.sherlocked93.club fe.sherlocked93.club;
}
复制代码这样，静态资源我们使用fe.sherlocked93.club/xx.html，动态资源我们使用fe.sherlocked93 .club/apis/getAwo，浏览器页面看起来还是访问家庭服务器，传递了相同的浏览器原点策略，毕竟我们好像没有跨域。
还可以组合起来，直接将前后台服务器地址转发到其他服务器.sherlocked93.club。只有末尾附加的路径才能区分请求是静态资源还是后端。服务取决于需求。 ？客户端地址改为归属服务地址，适应性更高。
例如，主站点是fe.sherl ocked93.club。该地址主页请求be.sherl ocked93.club中的资源，比如以前的fe.sherl ocked93.club/index.html，内容如下：
<html>
<body>
<h1>welcome fe.sherlocked93.club!!<h1>
<script type='text/javascript'>
var xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", "http://be.sherlocked93.club/index.html", true);
xmlhttp.send();
</script>
</body>
</html>
复制代码打开浏览器访问fe.sherl ocked93.club/index.html结果如下：
这里就明确了是跨域请求。可以在浏览器中直接访问http://be.sherl ocked93.club/index.html来访问，但是fe.sherl ocked93.club -访问html页面时会发生域访问。
在 解决跨域问题。 作者：SHERlocked93/etc/nginx/conf.d/文件夹中新建配置文件，匹配二级域名be.sherlocked93.club♷‶然后nginx - s 重新加载 重新加载配置。这时候去fe.sherl ocked93.club/index.html。结果如下。新配置的标头出现在请求中：
链接：https://juejin.im/post/6844904144235413512
来源：掘金版权属于作者。商业转载请联系作者获取授权。非商业转载请注明出处。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
