乐优商场项目day07——解决跨域问题

1.跨域相关问题及解决办法。

2.实现

虽然cors原理复杂，但实现简单。

SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了复杂的判定逻辑，我们直接用就好了。

① 在网关微服务 leyou-gateway中编写一个配置类，并且注册CorsFilter 。（这样其他的服务有跨域问题的话也可以解决）

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;@Configuration
public class LeyouCorsConfiguration {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*，否则cookie就无法使用了config.addAllowedOrigin("http://manage.leyou.com");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");// 4）允许的头信息config.addAllowedHeader("*");//2.添加映射路径，我们拦截一切请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);}
}

②重启gateway服务

③刷新后台页面，并点击分类管理

设置成功了。

分类的增删改功能暂时没做，页面已经预留好了事件接口，有兴趣的可以去完成一下。

乐优商场项目day07——解决跨域问题相关推荐

使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
vue cli3 项目中解决跨域
最近项目中用到高德api,要做一个天气的模块. 做这个天气的模块,得知道用户所在得城市于是呢,我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市具体代码: vue页面: <te ...
乐优商场项目day10—新增商品
先看一下页面新增商品是什么样的: 后台页面,商品列表页面,单击新增商品,弹出个新增商品的窗口. 我们选择商品分类之后,会发送一个请求,查询对应商品分类下的所有品牌,并返回到所属品牌中供选择. 从页 ...
乐优商场项目day13—页面渲染
一.处理null值查询结果中有null值,如下: 这样的空值既不好看,还占用带宽. 我们可以将空值过滤掉, 在搜索微服务的配置中配置一下: 然后重启搜索微服务之后再看看: null值字段就被过滤掉了 ...
乐优商场项目day02——总结
一.架构的演变传统架构 → 水平拆分 → 垂直拆分(最早的分布式) → soa(dubbo) → 微服务(SpringCloud) 二.远程调用技术 rpc协议:自定义数据格式,限定技术,传输速度快 ...
乐优商场项目day13—页面分页效果
一.添加需要的数据分页的话,我们需要知道总页数(totalPage).总条数(total).当前页(page), 所以我们先在data中记录这几个变量: 因为page是搜索条件之一,所以记录在sea ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
一步步教你前端vue项目开发中如何解决跨域问题
文章目录开发环境中跨域名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式项目背景跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...

乐优商场项目day07——解决跨域问题

乐优商场项目day07——解决跨域问题相关推荐

最新文章

热门文章