跨域原理及前端开发环境解决

跨域

跨域的出现:

1. 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能.
   ps:注意只存在浏览器中，app与小程序不存在跨域这一说。即使这个app是h5套壳。
2. 注意同源策略,是因为浏览器,所以跨域的出现根本原因是浏览器,因此postman测试请求可以的接口,出现跨域很正常.
3. 解决方法:在服务端解决.

proxy代理(本地开发环境)

1. wabpack设置proxy代理:本质nodejs开的服务. 语法是node语法.
2. 只支持本地环境,如上线后是同源最好,如上线后不同源,需配置Nginx代理.

    devServer: { //nodejs服务端代理
        proxy: {
            host: "0.0.0.0",
            port: 8088,
            https: false,
            hotOnly: false,
            proxy: { //nodejs服务端代理
            '/jacloud-web': {
                target: "http://110.53.177.22:8200/jacloud-web", //目标地址 即nodejs遇到前缀开头的会在前加上该地址。
                ws: true, //webSocket长连接
                changeOrigin: true, //是否跨域
                pathRewrite: { //路径重写 作用去掉/jacloud-web 如果前缀重复的情况.
// 原请求地址为/jacloud-web/todos 不替换时，http://110.53.177.22:8200/jacloud-web/jacloud-web/todos.               
     // 原请求地址为 /jacloud-web/todos 将'/jacloud-web'替换''时，
     // 代理后的请求地址为:http://110.53.177.22:8200/jacloud-web/todos
                    "^/jacloud-web": "" //将会作用在url地址中。
                }
            }
        }
    },

Nginx代理

1. 服务端设置Nginx反向代理.
2. **注意：**传参id_token在使用ningx转发代理时候会导致请求内容丢失情况。
   原因：nginx不会识别"_"这个符号，默认情况下它会忽略，所以后端没接收到，也就是说请求时候将这个id_token转发为idtoken导致的。

cors(简单请求、非简单请求，优化option请求)

@Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        req.setAttribute("org.apache.catalina.ASYNC_SUPPORTED", true);
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", ((HttpServletRequest) req).getHeader("Origin"));//解决跨域关键代码
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Disposition,Origin, X-Requested-With, Content-Type, Accept,Authorization,id_token");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Content-Security-Policy", "default-src 'self' 'unsafe-inline'; script-src 'self'; frame-ancestors 'self'; object-src 'none'");
        response.setHeader("X-Content-Type-Options", "nosniff");
        response.setHeader("X-XSS-Protection", "1; mode=block");
        chain.doFilter(req, res);
    }

• 虽然有cors解决跨域，但是呢，cors会有一个情况，它会将请求分为简单请求和非简单请求。

简单请求:

满足以下几点是简单请求：
1、只限于get、post、head方法
2、请求头不超出以下字段（且没有其他自定义字段）：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
如果不满足以上其中之一，那就是非简单请求！

非简单请求会发送一个预检请求options，用来嗅探服务端是否允许非简单请求跨域访问资源。

• 注意：这个options请求是浏览器自己发出的！

当然这是后端需要避免这方面的设置,避免踩坑.