浏览器 js axios 跨域请求局域网私有接口 浏览器跨域cors

目录

• 什么是跨域

• 两种跨域请求

• 简单请求
• 预检请求
• 非简单请求

• 同源策略
• 解决方法

• nginx代理
• 前端解决方法
• 后台配置

什么是跨域

CORS通俗地译为跨域资源共享，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

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

两种跨域请求

简单请求

简单请求不会触发预检请求。简单请求包括以下特征要求。
1.属于以下三种请求

• HEAD请求
• POST请求
• GET请求

2.请求头不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

预检请求

要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

非简单请求

比如你发送一个登录请求，是一个非简单请求，浏览器回先发送一个OPTIONS请求，如果服务器端不允许跨域，请求就会直接结束，后续的登录请求就不会发送。

同源策略

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；参考下图

解决方法

nginx代理

使用nginx部署为同一个域，但是这种在开发调试的时候非常麻烦。

前端解决方法

本人前端开发不是太熟，就不过多概

后台配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
 @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //配置跨域
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }

笔者作为一个新人，发表一下自己浅薄的见解，如果哪里说得不对，希望读者能提出批评和指正，本人表示诚心的感谢。