老被跨域问题烦？看看都有哪些处理方法

• 2019 年 10 月 3 日
• 筆記

?????IT???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

1. ?????

????????????????“????”???????“????”????????????????????????????????????????????“??”?????????http??????????????://??:??/?????????????????????????????????????????? http://blog.jboost.cn/docker-1.html? ????????????

????????????????????????????

1. ?Cookie?LocalStorage???IndexDB????????NoSQL????????????

2. ?DOM???

3. AJAX??

?????????????????????????????????????AJAX???????????????????????????AJAX???????????????????

2. ????????

???“????”??????????????????????????????????????????????????????????

1. ?????Cookie?LocalStorage?IndexDB?????
   ???????????????Cookie??? SESSIONID????????????????? token????REST????????????????Tomcat????Cookie????? JSESSIONID ???????????REST???token?????? LocalStorage ?????????????????????????????????????????????????????????

2. ?DOM?????
   ????DOM???????????????????????????? <iframe> ???????????DOM?????????????????????????…

3. ?AJAX?????
   ???????AJAX??????????????????????????????????1???????????????????AJAX????????????????????????????????????????????????????????? 

??????????????????????????????

3. ????????

?????????????????AJAX??????????????????CORS?JSONP???????????

3.1 ??

??“????”??????????????????????????????????? Nginx????????????? http://blog.jboost.cn????????? http://api.jboost.cn???? Nginx ???????

server{      # ??      listen 80;      # ??      server_name blog.jboost.cn;      # ?? http://blog.jboost.cn/api/xxx ???????? http://api.jboost.cn/api/xxx      location ^~ /api {          proxy_pass http://api.jboost.cn;      }  }

?????AJAX??????? http://api.jboost.cn/api/xxx ??????? http://blog.jboost.cn/api/xxx ????????????????? 

3.2 CORS

CORS?Cross-Origin Resource Sharing????????????CORS???????????????????????IE10??????CORS??????CORS????????????????Spring Boot???????????????CorsFilter????????????

 1 @Configuration   2 @ConditionalOnClass({Servlet.class, CorsFilter.class})   3 public class CORSAutoConfiguration {   4   5     @Bean   6 @ConditionalOnMissingBean(name = "corsFilterRegistrationBean")   7 public FilterRegistrationBean corsFilterRegistrationBean() {   8         UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();   9  10         CorsConfiguration corsConfiguration = new CorsConfiguration();  11         corsConfiguration.applyPermitDefaultValues();  12         corsConfiguration.setAllowedMethods(Arrays.asList(CorsConfiguration.ALL));  13         corsConfiguration.addExposedHeader(HttpHeaders.DATE);  14  15         corsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);  16  17         CorsFilter corsFilter = new CorsFilter(corsConfigurationSource);  18         FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();  19         filterRegistrationBean.setFilter(corsFilter);  20         filterRegistrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);  21         filterRegistrationBean.addUrlPatterns("/*");  22  23         return filterRegistrationBean;  24     }  25 }

???????????Header??????????? 

• Access-Control-Allow-Origin ??????????????????????????? * ???????

• Access-Control-Allow-Methods ????????????HTTP????GET?POST?PUT?DELETE????? * ?????

• Access-Control-Allow-Headers ?????? Access-Control-Request-Headers ???????????????????????

3.3 JSONP

JSONP???????HTML?????? <script>, <img>??? src ???????????????????????

<script type="text/javascript" src="http://api.jboost.cn/hello?name=jboost&callback=jsonpCallback"/>

????JS?? jsonpCallback?????????????JS??jsonpCallback???????jsonpCallback({"name":"jboost"})????jsonpCallback????????????????????{"name":"jboost"}??
JSONP????????????????GET??——??????<script>, <img>???POST??????????????????????

4. ??

????????????????????????????????????????????????????????????????????????CORS????????????????????????????????????????JSONP???????????GET??????????????????????????????????