文章目录

为什么会产生跨域问题
同源策略（Same-origin policy）
解决方案
- 服务端解决方案
- - 简单请求
  - 复杂请求
  - 测试
  - - 简单请求测试
    - 复杂请求测试
- 代理服务器，反向代理接口请求
- jsonp 方式

为什么会产生跨域问题

1995年，Netscape 公司出于安全的考虑在浏览器中引入了“同源策略”。

跨域问题只出现在浏览器访问的页面，因为这是浏览器为了保户用户安全而制造的策略。假如没有这层保护，网站就很容易受到跨站伪造请求（CSRF）的攻击。

同源策略（Same-origin policy）

浏览器端对请求的处理中，如果两个 URL 的协议、域名和端口都相同，我们就称这两个URL 同源

我们来举几个例子

同源

  http://www.xxxx.com/indexhttp://www.xxxx.com/module/path1

非同源

 http://www.xxxx.com/indexhttps://www.xxxx.com/module/path1

 http://www.xxxx.com/indexhttp://www.yyyy.com/module/path1

 http://www.xxxx.com/indexhttp://www.xxxx.com:8081/module/path1

两个相同的源之间浏览器默认其是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约。

安全性：浏览器要防止当前站点的私密数据不会向其他站点发送

如当前站点的Cookie,LocalStorage,IndexDb 不会被发送到其他站点或被其他站点脚本读取到。
无法跨域获取Dom，无法发送Ajax请求。

可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点

如：<script><img><iframe><link><vedio>等，可以同src属性跨域访问允许跨域提交表单/或重定向请求

解决方案

服务端解决方案

跨域请求分两种情况

简单请求

请求方法使用GET/HEAD/POST请求之一
仅能使用CORS安全的头部，Accept,Accept-Language, Content-Language,Content-Type
Content-Type的值只能是：text/plain,multipart/form-data,application/x-www-form-urlencoded三者其中之一

请求从domain a 发过来，请求到web domain b , 如果这个时候domain b 返回一个允许，可以解决这个问题。

服务端解决方案：在http响应头中添加 Access-Control-Allow-Origin 头，值为信任的站点

复杂请求

不符合简单请求条件的即为复杂请求，访问跨域资源前，需要发起preflight预检请求（OPTIONS请求）询问何种请求是被允许的，预检请求失败，则不会发起正式的业务请求，预检请求成功，然后发起正式请求。

测试

随便写个spring boot 的工程，启动2个端口一个8080 一个8081 ，访问8080的页面，调用8081的后台服务，用来测试

简单请求测试

来看第一个

CASE1: 【GET请求】

点击访问

服务端后台的代码

添加

response.addHeader("Access-Control-Allow_origin","http://localhost:8080");

重启后，重新测试

CASE2: 【表单请求】

目前的后端代码

来测试走一波

重启重新测试， OK

复杂请求测试

【复杂请求】

和上面Case2的请求一模一样，除了 Content-Type , 那还能用上面的添加响应头解决吗？
答案是不能的。。。。。

我们用wireshark来跟踪下 option 预检的请求

Spring Boot 官方给出了解决方案

我们就看全局的这个配置吧

请求下跟踪下

good

代理服务器，反向代理接口请求

location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8081/;}

说一下为什要rewrite，因为 api 这个前缀仅仅用于前台页面发请求时候携带，后台并没有 api这个context，所以需要在nnginx 通过rewrite机制来将api 替换掉。

rewrite ^/api/(.*)$ /$1 break;

这个就是一 /api开头的请求，替换为 $1 ，这个$1就是请求中/api后面的内容， break 即为匹配到则不往后面找了。

jsonp 方式

基于

可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点。

如：<script><img><iframe><link><vedio>等，可以同src属性跨域访问允许跨域提交表单/或重定向请求

后台代码

测试走一波

了解下就行了，实际中很少会用到jsonp来解决跨域问题

Java - 探究前后分离带来的跨域问题相关推荐

Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
前后端分离项目，跨域问题解决方案
1.什么是跨域? 要了解跨域,先要说说同源策略. 同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略. 由于浏览器同源策略的限制,非 ...
java后端通过Filter过滤器解决跨域问题
此方案只需服务端的代码修改因为现在要前后端分离开发,那必不可免的会出现跨域问题,以下是自己实际测试过的有效代码: 步骤: 一.在 web.xml文件中添加 <!-- 2019-01-15 解决 ...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
vue前后分离session实现_vue2 前后端分离项目ajax跨域session问题解决
最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. v ...
php 跨域验证_php 前后端分离开发进行跨域请求时ajax发送验证参数token的header头解决方法...
php前后端分离开发中要实现前后端参数信息交互,必须解决token标识验证问题. 步骤如下: 1.前端ajax发送请求时,要设置一个自定义header头.代码如下: $.ajax({ url:&quo ...
vue 解决跨域调试_vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
JAVA解决OPTIONS请求问题：跨域时ajax发送两次请求，其中options预请求参数为null及其解决方案
转载请注明出处原文链接:https://blog.csdn.net/qq_39309348/article/details/103267908 在正式跨域的请求前,浏览器会根据需要,发起一个&quo ...
thinkphp fastadmin 解决vue前后端分离项目的跨域问题以及 OPTIONS请求类型
fastadmin的专用方法: 修改文件:application/config.php,这是fa的配置文件. 修改属性 cors_request_domain,搜一下就找到了,在里面加上你的域名就行了 ...

Java - 探究前后分离带来的跨域问题

文章目录

为什么会产生跨域问题

同源策略（Same-origin policy）

解决方案

服务端解决方案

简单请求

复杂请求

测试

简单请求测试

复杂请求测试

代理服务器，反向代理接口请求

jsonp 方式

Java - 探究前后分离带来的跨域问题相关推荐

最新文章

热门文章

Java - 探究前后分离带来的跨域问题

文章目录

为什么会产生跨域问题

同源策略 （Same-origin policy）

解决方案

服务端解决方案

简单请求

复杂请求

测试

简单请求测试

复杂请求测试

代理服务器，反向代理接口请求

jsonp 方式

Java - 探究前后分离带来的跨域问题相关推荐

最新文章

热门文章

同源策略（Same-origin policy）