解决前端烦人的跨域处理

跨域CROS是什么

CORS[4]（Cross-Origin Resource Sharing）的全称叫 跨域资源共享，
名称好高大上，别怕，这玩意儿其实就是一种机制。
浏览器不是有同源策略呐，这东西好是好，
但是对于开发人员来说就不怎么友好了，
因为我们可能经常需要发起一个 跨域 HTTP 请求。我们之前说过，
跨域的请求其实是发出去了的，只不过被浏览器给拦截了，因为不安全，说直白点儿就是，
你想要从服务器哪儿拿个东西，但是没有经过人家允许啊。所以怎么样才安全 ？
服务器允许了不就安全了，这就是 CORS 实现的原理：使用额外的 HTTP 头来告诉浏览器，
让运行在某一个 origin 上的 Web 应用允许访问来自不同源服务器上的指定的资源。

---

方案一、nginx

ngxin做反向代理

# nginx.config
# ...
server {
  listen       80;
  server_name  www.domain1.com;
  location / {
    proxy_pass   http://www.domain2.com:8080;  #反向代理
    proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
    index  index.html index.htm;

    # 当用 webpack-dev-server 等中间件代理接口访问 nignx 时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Credentials true;
    # ...
  }
}

---

方案二、jsonp的使用

function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    // 创建一个临时的 script 标签用于发起请求
    const script = document.createElement('script');
    // 将回调函数临时绑定到 window 对象，回调函数执行完成后，移除 script 标签
    window[callback] = data => {
      resolve(data);
      document.body.removeChild(script);
    };
    // 构造 GET 请求参数，key=value&callback=callback
    const formatParams = { ...params, callback };
    const requestParams = Object.keys(formatParams)
      .reduce((acc, cur) => {
        return acc.concat([`${cur}=${formatParams[cur]}`]);
      }, [])
   .join('&');
 // 构造 GET 请求的 url 地址
    const src = `${url}?${requestParams}`;
    script.setAttribute('src', src);
    document.body.appendChild(script);
  });
}

// 调用时
jsonp({
  url: 'https://xxx.xxx',
  params: {...},
  callback: 'func',
})

---

方案三、springboot代码

package com.manlitech.cloudboot.basebootconfig.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Collections;

/**
 * 实现基本的跨域请求
 * @author
 *
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource 
            = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*springboot 2.4 之后需要注释 允许访问的客户端域名*/
        //corsConfiguration.addAllowedOrigin("*");
        /*springboot 2.4 之后需要增加 允许任何来源*/
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

---

方案四、websocket

const WebSocket = require('ws');

const ws = new WebSocket('ws://www.host.com/path');

ws.on('open', function open() {
  ws.send('something');
});

ws.on('message', function incoming(data) {
  console.log(data);
});

---

微信公众号，需要的话就关注下我~