解决跨域问题

跨域条件

浏览器

  • 浏览器使用了同源策略限制。
    • 不能向工作在不同源的的服务请求数据。(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

代理

  • 开发环境使用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

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

参考

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读