怎么理解服務器的跨域訪問

本篇內容介紹了“怎么理解服務器的跨域訪問”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

跨域訪問問題，一般是由于瀏覽器同源策略保護引起。

目前最為安全且流行的是使用服務器代理，使得前后端處于同源。

一、這種方式運用的就是服務器的反向代理技術，控制客戶端和服務器的訪問都從代理服務器經過，比如用nginx作為服務器代理，在nginx上配置客戶端和第三方服務的反向代理，這樣就可保證客戶端、第三方是同源的了，同一個源，都來自代理服務器。

二、JSONP

jsonp解決跨域問題的原理是，瀏覽器的script標簽是不受同源策略限制的，我們可以在script標簽中訪問任何域名下的資源文件。利用這一特性，用script標簽從服務器中請求數據，同時服務器返回一個帶有方法和數據的js代碼，請求完成，調用本地的js方法，來完成數據的處理。
不推薦使用jsonp，首先jsonp是一種非官方的方法，而且這種方法只支持GET方法，不如POST方法安全；而且一般前后端分離最通用的方法是返回統一的json格式。

三、服務器端跨域訪問設置

對于spring boot

controller啟用@CrossOrigin：如@CrossOrigin(origins = "http://xxx.com", maxAge = 3600)

origins  ： 允許可訪問的域列表
maxAge：準備響應前的緩存持續的最大時間（以秒為單位）。

也可以在filter設置

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

或者攔截器

@Configuration
public class MyConfiguration extends WebMvcConfigurerAdapter  {

    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowCredentials(true)  
                .allowedHeaders("*")  
                .allowedOrigins("*")  
                .allowedMethods("*");  

    }  
}

或者注入bean

@Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允許請求帶有驗證信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允許訪問的客戶端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允許服務端訪問的客戶端請求頭*/
        corsConfiguration.addAllowedHeader("*");
        /*允許訪問的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

“怎么理解服務器的跨域訪問”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！