每日一VUE——组件的生命周期-CFANZ编程社区

所谓跨域访问，其底层就是访问是否同源的问题，跨域问题跟前端的关系不大，后台只要在服务器上配置好浏览器需要的 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;  # 设置响应体长度为0
            return 204;  # 返回204 No Content响应
        }

        # 其他NGINX配置指令
        ...
    }
}

对于跨域问题，现在前端开发的解决方案都是通过 proxy 进行代理，从而避免了跨域的问题，这里再次探讨一下跨域问题和跨域的问题的原理，浏览器如何判断，判断那些 header。