解决跨域问题

跨域条件

浏览器

• 浏览器使用了同源策略限制。
  • 不能向工作在不同源的的服务请求数据。（c->s）
  • 无法获取不同源的document/cookie等BOM和DOM。（c->c）
• 不存在于安卓/ios/Node.js/python/ java等其它环境

不同源

• 请求和目的的协议、域名、端口不全相同。

XHR请求

• XHR（XMLHttpRequest）请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
• script标签并无跨域限制。这是因为script标签引入的文件不能够被客户端的 js 获取到, 不会影响到原页面的安全。

限制原因

限制请求

• CSRF攻击。
• 只限制读的原因：因为如果连请求都发不出去了，那就不能做跨域资源共享了，无法读取返回结果继续下一步的操作，如获取转账请求的一些必要的验证信息。

限制DOM读取

• XSS攻击。伪装成另一网站。如套一个iframe或者通过window.open的方法，从而得到用户的操作和输入或者cookies。

解决方案

Jsonp

• Jsonp实现。

代理

• 开发环境使用proxyTable配置代理。参考。

    devServer.proxy: {
      '/dev-api': {
        target: 'http://127.0.0.1:8080/',//设置你调用的接口域名和端口号
        changeOrigin: true,  //跨域
        pathRewrite: {
          '^/dev-api': '/' //用target替换本地的nodejs路径
        }
      }

• 生产环境配Nginx反向代理，隐藏服务端信息。参考。
  • 配置路径：/etc/nginx/conf.d

server {
    listen       80;
    server_name  a.com;
 
    location / {
        proxy_pass http://localhost:8081/ ;
    }
    
    location /panda {
        proxy_pass http://localhost:8080/test ;
    }
}

CORS

• 跨域资源共享。
  • server端全局实现方式：

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

参考

• 我知道的跨域与安全
• 一文搞懂跨域