本文主要是介绍跨域问题CORS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
所谓跨域访问，其底层就是访问是否同源的问题，跨域问题跟前端的关系不大，后台只要在服务器上配置好浏览器需要的 header 就可以解决跨域的问题。浏览器的请求为什么不能跨越，主要是为了安全，比如攻击者给用户发了一封邮件，邮件有个链接，如果用户不小心点击了这个链接，用户就被带到了攻击者的网站。一旦进入了攻击者的网站，他能做的破坏就多了，下面举个转账的例子，这只是个例子。这是 CSRF 攻击的一种，这就就是为什么要限制跨域。
<body onload="document.forms[0].submit()"><form action="http://netbank.com/transfer.do" method="POST"><input type="hidden" name="acct" value="AttackerA"/><input type="hidden" name="amount" value="$100"/><input type="submit" value="View my pictures!"/></form></body>怎么判断是否跨域，首先是根据域名进行对比，域名不同包括子域名不同都属于跨域，第二就是检查端口，如果端口不同也属于跨域。
| URL | 结果 | 原因 |
|---|---|---|
| http://store.aws.com/dir2/new.html | 来源相同 | 只有路径不同 |
| http://store.aws.com/dir/inner/other.html | 来源相同 | 只有路径不同 |
| https://store.aws.com/page.html | 来源不同 | 协议不同 |
| http://store.aws.com:81/dir/page.html | 来源不同 | 端口不同（默认情况下，http:// 的端口号为 80） |
| http://news.aws.com/dir/page.html | 来源不同 | 主机不同 |
通常跨域问题都是在服务进行配置，比如下面的 Nginx 配置。
server {listen 80;server_name example.com;# 添加CORS头部location / {add_header 'Access-Control-Allow-Origin' '*'; # 允许所有来源的请求add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许的HTTP方法add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 允许的请求头# 可选: 如果需要允许凭证（如cookie、HTTP身份验证），请添加Access-Control-Allow-Credentials头部# add_header 'Access-Control-Allow-Credentials' 'true';# 可选: 添加Access-Control-Max-Age头部以缓存预检请求的响应（单位：秒）# add_header 'Access-Control-Max-Age' 3600;if ($request_method = 'OPTIONS') {add_header 'Content-Type' 'text/plain; charset=utf-8'; # 设置响应的Content-Type头部add_header 'Content-Length' 0; # 设置响应体长度为0return 204; # 返回204 No Content响应}# 其他NGINX配置指令...}
}对于跨域问题，现在前端开发的解决方案都是通过 proxy 进行代理，从而避免了跨域的问题，这里再次探讨一下跨域问题和跨域的问题的原理，浏览器如何判断，判断那些 header。
这篇关于跨域问题CORS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
