前端工程师面试题？vue2知识整理？

场景：前后端分离，页面和后端项目部署在不同服务器，出现请求跨域问题。

原因：CORS：跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 >

在前后端接口请求中，由于浏览器的限制，会出现跨域的情况。常用的跨域方案有：

1、JSONP跨域
2、Nginx反向代理
3、服务器端修改header
4、documentdomain
5、windowname
6、postMessage
7、后台配置运行跨域

当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域

特别注意两点：
1、如果是协议和端口造成的跨域问题“前台”是无能为力的，
2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

当前微服务拆分已经成为趋势，大部分公司都对其软件产品做微服务架构调整。对产品先进行业务、模块拆分，大部分也进行前后端分离的业务调整。

服务拆分不能避免的问题那就是：请求跨域问题，针对跨域问题，先前专门做了资料整理

针对这些问题可以查看 《SpringCloud 中跨域资源共享(cors)到底解决了什么？》

还有解决跨域问题开启跨域资源共享(cors)后。

针对这系列问题可查看 《微服务开启跨域资源共享(cors)后，真的会被攻击么？》

阅读CorsConfiguration源码可以发现在CORS 配置中定义

基础CorsConfiguration的定义可自定义跨域配置信息CorsConfig 实现 CorsConfigurationSource

注意在配置时候引用注解@ConfigurationProperties为什么这里使用单一注解并没有直接注入到Bean容器中？针对这问题的分析可阅读 《@
EnableConfigurationProperties 的工作原理》

配置信息CorsConfig基础信息后实现getCorsConfiguration方法

定义Web线程拦截器为了，用于统一处理线程变量！同一个服务肯定不会出现跨域问题。只有不同服务之间调用才会出现此类问题。记得先前在分析 《怎样在输出日志中加入traceId 进行链路追踪》 和 《如何保证各个微服务之间调用的安全性》 对个服务之间RPC调用请求线程变量传递问题。

本文主要微服务之间跨域问题的解决方案，至于为什么会存在跨域问题和跨域问题开启后会有哪些攻击模式

在上几篇文章中已逐步分析，解决微服务跨域问题主要分三步走

前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣

需要把前端看成两部分，一部分是页面，另一部分是接口（或者加数据资源）。前端页面中调接口是有限制的，同源策略(SOP)要求我们调用的接口必须和页面在同一域名下，说是为了保证数据的安全。所谓同源：协议+域名+端口

但实际情况是，在前后端分离的大趋势下，好多页面和接口的服务器分布在不同的域名下。比如在开发时，前端页面分为本地环境、测试环境、仿真环境、正式环境，而接口也分为测试环境、仿真环境、正式环境，当然也可以有本地环境。他们在不同的域名下或IP下或者端口下，是不同源的。或者平时我们也能遇到需要调用不同的服务器数据资源。显然，同源策略保障了部分安全的同时，给开发造成了很多的麻烦。

所以，跨域问题是每个前端绕不过去的坎儿。

解决办法有两个方向，一个是前端解决，一个是服务端接口解除限制。

前端解决就是通过jsonp、jquery ajax、axios配置代理等。还有个简单的，比如Mac用户，可以使用Charles工具设置代理，临时使用。
服务端解决可以通过nginx反向代理设置允许跨域请求的域名、或者设置Access-Control-Allow-Origin，允许跨域资源共享等。
具体解决方案可参考 >