跨域问题学习

73、跨域问题

1、跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

2、为什么会出现跨域问题

当一个请求url的协议,域名,端口三者之间任意一个与当前的url不同都即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）

3、非同源限制

1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2、无法接触非同源网页的 DOM

3、无法向非同源地址发送 AJAX 请求

4、跨域问题解决方案

1、代理转发（前端）

步骤:

1)在vue.config.js中配置devServer

2)确保基地址指向本地服务

 devServer: {
    },
    proxy: {
      // 当前前端的项目服务器devServer,收到一个请求,并且请求地址以/api打头,就出触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
  },

2、跨源资源共享（CORS）

由于XHR对象被W3C标准化之后，提出了很多XHR Level2(2008-2012年)的新构想，其中新增了很多新方法（onload、response…）和CORS跨域资源共享。 浏览器升级后开始支持CORS方案，从IE10开始支持。
CORS方案，就是通过服务器设置响应头来实现跨域 。

CORS才是解决跨域的真正解决方案。

• 前端需要做什么？

  • 无需做任何事情，正常发送Ajax请求即可。

• 后端需要做什么？

  后端在配置类中添加corsFilter过滤

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /* 是否允许请求带有验证信息 */
        corsConfiguration.setAllowCredentials(true);
        /* 允许访问的客户端域名 */
        //2.0-2.3用法
//		corsConfiguration.addAllowedOrigin("*");
        //2.4用法
        corsConfiguration.addAllowedOriginPattern("*");
        /* 允许服务端访问的客户端请求头 */
        corsConfiguration.addAllowedHeader("*");
        /* 允许访问的方法名,GET POST等 */
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }