应用程序的相混思路
布吕马的根源是即使应用程序的相混思路，这是应用程序所致可靠性考量作出的管制，简而言之相混是指：搜索引擎、协定、路由器完全相同。
比如说在网络上有三个天然资源（页面或是允诺等），假如A想出访B的天然资源，假如A、B绝非相混，即搜索引擎、协定、路由器有任一两个不完全相同，所以就会再次出现布吕马难题。
布吕马的整体表现即是在应用程序掌控面板中报近似于右图中的严重错误。
上面是常用的三种布吕马的情形，除前三种单厢再次出现布吕马难题
布吕马难题的化解
撷取三个较为常用的化解布吕马的配套措施
后端软件系统
对Java后端而言，如果你采用的是SpringBoot来合作开发工程项目，所以化解布吕马会十分的方便快捷，只须要在须要迈入布吕马全力支持的口实的掌控层，是是常说的Controller，加进类注释：@CrossOrigin，如下表所示
@CrossOrigin @RestController public class HelloController { // …具体允诺 }SpringBoot也可以编写两个专门的配置类来化解布吕马的难题，即CorsConfig，这样做的好处是不须要每两个Controller加进@CrossOrigin注释
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configurationpublic class CorsConfig implements WebMvcConfigurer {@Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(“/**”) .allowedOrigins(“*”) .allowCredentials(true) .allowedMethods(“GET”, “POST”, “PUT”, “DELETE”, “OPTIONS”) .maxAge(3600); } }还有一种方法也可以化解布吕马难题，是利用过滤器来化解，代码如下表所示
@Component public class CORSFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; 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”); filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { } }以上三种方法都可以实现对布吕马的全力支持，个人最推荐采用第一种注释的方式，简单粗暴！
前端软件系统
在Vue的工程项目中可以采用配置代理的方式化解布吕马难题，以Vue2.X版本为例
这里后端路由器8888，暴露两个moti-memo/hello允诺，前端路由器为8080，通过上文可知，在前后端均不处理的情形下，路由器不同肯定会发生布吕马难题。
export default
{
name: App,
created() {
this.$http.get(“http://localhost:8888/moti-memo/hello”).then(res => {
console.log(res.data);
})
}
}前端配置代理的方式也很简单，编辑config/index.js配置文件，在dev对象的proxyTable属性配置代理信息，如下表所示
module.exports = { dev: { // Paths assetsSubDirectory: static, assetsPublicPath: /, proxyTable: { /api: { target:http://127.0.0.1:8888, changeOrigin:true, pathRewrite:{ ^/api: } } },这里可以看到我们配置了/api前缀的代理，之后我们只须要在采用axios发送允诺的时候把原来布吕马的允诺IP+路由器替换成/api。
<script> export default { name: App, created() {this.$http.get(“/api/moti-memo/hello”).then(res => { console.log(res.data); }) } }</script>在Vue-cli的3.X版本中，配置文件变为了vue.config.js，我们须要编辑这个配置文件，在devServer对象的proxy属性加入代理信息，参考如下表所示
module.exports = { lintOnSave: false, devServer: { proxy: { /api: { target: http://127.0.0.1:8888, changeOrigin: true, pathRewrite: { ^/api: } } } } }Nginx软件系统
采用Nginx配置反向代理也是可以帮助我们化解布吕马难题的，只须要修改nginx的配置文件，参考如下表所示
server { listen 9000; server_name localhost; location /api/ { rewrite ^/api/(.*)$ /$1 break; # 布吕马服务的地址 proxy_passhttp://www.serverA.com; } }前端所有对布吕马服务的允诺都加两个/api前缀，Nginx做代理的时候会移除/api前缀。例如：允诺路径为/api/hello的允诺将会出访http://www.serverA.com/hello。
