跨域:浏览器同源策略
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"
协议相同/域名相同/端口相同
一句话:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
浏览器控制台跨域提示:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
解决方法
1)JSONP
2)Http响应头配置允许跨域(通过cors协议解决跨域问题)
Cors协议:H5中的新特性:Cross-Origin Resource Sharing(跨域资源共享)。通过它,我们的开发者(主要指后端开发者)可以决定资源是否能被跨域访问。
cors是一个w3c标准,它允许浏览器(目前ie8以下还不能被支持)像我们不同源的服务器发出xmlHttpRequest请求,我们可以继续使用ajax进行请求访问。
具体关于cors协议的文章 ,可以参考http://www.ruanyifeng.com/blog/2016/04/cors.html 这篇文章
第一步:nginx层配置(可以参考https://www.cnblogs.com/hawk-whu/p/6725699.html)
server{ listen 8099; server_name wdm.test.cn; location / { // 没有配置OPTIONS的话,浏览器如果是自动识别协议(http or https),那么浏览器的自动OPTIONS请求会返回不能跨域 if ($request_method = OPTIONS ) { add_header Access-Control-Allow-Origin "$http_origin"; add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE"; add_header Access-Control-Max-Age "3600"; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"; add_header Access-Control-Allow-Credentials "true"; add_header Content-Length 0; add_header Content-Type text/plain; return 200; } add_header 'Access-Control-Allow-Origin' '$http_origin'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type,*'; proxy_pass http://127.0.0.1:8080; } }第二步:程序代码中处理
SpringBoot自带配置
@Configuration public class Cors extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH") .allowCredentials(true).maxAge(3600); } }如果想做到更细致也可以使用@CrossOrigin这个注解在controller类中使用。
@CrossOrigin(origins = "http://192.168.1.97:8080", maxAge = 3600) @RequestMapping("rest_index") @RestController public class IndexController{}(注意点:假如接口报错,则跨域配置不生效)
相关推荐
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot...我面临的第一个问题是跨域,浏览器控制台直接报CORS,以我多年开发经验,我果断在后台配置了跨域配置,代码如下: @Configuration publi
12 spring boot Security Jwt 前后端分离跨域登录 代码
第一部分:部署linux + nginx 第二部分:部署Windows+tomcat 第三部分:调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发,使用代码生成器可以一键生成前后端代码。)
这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。 这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。...
这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。 API 编码方式均为UTF-8 1.管理员相关 1.1 注册 接口地址 domain/api/v1/register 请求方式 HTTP POST ...
第一部分:部署linux + nginx 第二部分:部署Windows+tomcat 第三部分:调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发,使用代码生成器可以一键生成前后端代码。)
主要介绍了前后端分离 vue+springboot 跨域 session+cookie失效问题的解决方法,解决过程也很简单 ,需要的朋友可以参考下
前后端分离后台管理项目是一种开发模式,其中前端和后端的开发分离进行。前端负责用户界面的设计和开发,而后端负责数据处理和业务...跨域问题:由于前后端分离项目中前端和后端运行在不同的域名下,会涉及到跨域问题
前后端分离项目,Spring boot作为后端,vue框架实现前端,后端整合swagger3测试工具,jwt实现验证码生成,awt生成图形验证码,整合邮箱验证,使用mybatis-generator自动生成实体类以及mapper,设置有拦截器验证登录...
主要介绍了springboot+angular4前后端分离 跨域问题解决详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前后端分离,实现跨域请求,权限拦截,权限细化到按钮、请求与菜单8.实现请求\响应双向数据加密9.可在系统中自由的配置菜单、按钮、访问的权限,保证了操作的安全性,同时也避免了一些专业人员的强行代码操作10.支持...
本demo实现了简单的登录、注册、获取用户信息三个功能,其中包含密码加密,解决了前后端分离项目常见的跨域问题及session问题,界面清晰简单,后台分层清晰,逻辑清楚。 值得一看。 项目结构:ajax_test为后端项目,...
通过呆着读者手写速成版本的websocket入门案例,以项目案例的方式带你...4.前后端分离项目的Cros跨域问题解决 阅读建议: 此资源以案例代入知识点的方式,让你快速上手websocket的相关学习,可针对项目本身向外扩展。
若依快速开发脚手架springboot
特别注意:本商品为 Springboot 工作流 前后分离+跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot 2.7.0+Flowable6.7.2+ mybaits+maven+接囗前端页面:html +vuejs 形式jquery ajax 异步跨域json 格式数据交互 ...
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里...
Spring Boot,MyBatis,MyBatis Generator,Swagger2,Maven,MySQL,Git,Redis 前端 Vue,Vue路由器,Vue CLI,元素UI,Vant,Nuxt,axios,节点,npm,webpack,sass 开发工具 IntelliJ IDEA,适用于MySQL的...
前后端分离 ajax VsCode 插件 作用:模拟一个默认在5500端口的本地服务 jq ajax主要参数 $.ajax({ //请求方式 type:'POST', //发送请求的地址 url:'fzz.php', //服务器返回的数据类型 dataType:'json', //...