【跨域】如何解决跨域问题

超、凢脫俗 2024-03-16 13:32 121阅读 0赞

## 同源策略 ##

### 同源 ###

相同协议+相同域名+相同端口

### 内容 ###

*  [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _ MDN _mozilla.org]

浏览器页面向不同源的服务器发送ajax请求资源时，响应的数据会被浏览器拦截

### 意义 ###

出于安全性的考虑，防止恶意获取数据

## 解决方案 ##

### JSONP ###

不使用ajax请求，替换为不受同源策略控制的script标签

#### 缺点 ####

*  只支持get

不常用

### Node正向代理 ###

利用服务端请求不会跨域的特性，让接口和当前站点同域。

浏览器页面的请求都发给同源的node代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器

![image.png][]

eg Vue-cli 3.x

// vue.config.js 如果没有就新建
    module.exports = {
        
      devServer: {
        
        port: 8000,
        proxy: {
        
          "/api": {
        
            target: "http://localhost:8080"
          }
        }
      }
    };

### Nginx反向代理 ###

浏览器页面的请求都发给同源的nginx代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器  
![image.png][image.png 1]

server {
        
            listen 80;
            server_name local.test;
            location /api {
        
                proxy_pass http://localhost:8080;
            }
            location / {
        
                proxy_pass http://localhost:8000;
            }
    }

#### 缺点 ####

*  不够灵活，前后端人员需要协商请求路径

### CORS ###

后端添加浏览器页面ip的白名单，浏览器获取http响应头后，判断页面ip是否在白名单中，决定是否拦截响应数据  
[跨源资源共享（CORS） - HTTP | MDN (mozilla.org)][CORS_ - HTTP _ MDN _mozilla.org]

springboot中的标签`@CrossOrigin`可以配置

### websocket ###

没有了http头，就不受同源策略的限制

## 参考文章 ##

*  [解决跨域问题的几种方案 - 知乎 (zhihu.com)][- _ _zhihu.com]
 *  [10 种跨域解决方案（附终极方案） - 知乎 (zhihu.com)][10 _ - _ _zhihu.com]

[- Web _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/07a10af6ba404aaeacaa395473935639.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c8ffbe2465dc4cbfa95d397ef59d75d1.png
[CORS_ - HTTP _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
[- _ _zhihu.com]: https://zhuanlan.zhihu.com/p/141977678?from_voters_page=true
[10 _ - _ _zhihu.com]: https://zhuanlan.zhihu.com/p/132683471