资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/javaweb服务端跨域支持

javaweb服务端跨域支持

dadong / 1636人阅读

摘要：跨域是浏览器拦截了服务器端返回的相应，不是拦截了请求。通过来实现跨域使用来实现跨域可以解决下不能跨域的问题，仅仅支持请求服务端多加一个参数，在返回数据时用把具体的数据包裹起来，传回前端。

项目开发为了支持web浏览器ajax的直接请求，涉及到了跨域的需求，通过学习对跨域有了更深入的认识，现在总结一下：

1.跨域说明 
</>复制代码 
  1. 跨域指请求和服务的域不一致，浏览器和H5的ajax请求有影响，而对服务端之间的http请求没有限制。
  2. 跨域是浏览器拦截了服务器端返回的相应，不是拦截了请求。
2.服务端跨域支持 
</>复制代码 
  1. 服务端的跨域支持主要包括两种方式：
  2. 1.设置response的Header属性
</>复制代码 
  1.  response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域访问的域，可以是通配符”*”；
  2.  response.setHeader("Access-Control-Allow-Methods", "POST, GET");
  3.  response.setHeader("Access-Control-Max-Age", "1800");
  4.  response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
  5.  response.setHeader("Access-Control-Allow-Credentials", "true");

注：Access-Control-Allow-Origin刚开始认为可以维护一个域的列表，用逗号分隔，后期测试中发现不行，后来在一篇文章中看到此处只允许配置一个域，如果要实现多个域，可以维护一个域列表，与请求中的域进行匹配，匹配成功，则设置跨域为当前域。

</>复制代码 
  1. 2.通过jsonp来实现跨域
  2.   使用jsonp来实现跨域可以解决ie下不能跨域的问题，仅仅支持get请求
  3.   服务端多加一个参数callback，在返回数据时用callback把具体的数据包裹起来，传回前端。
  4.   例：请求中callback的参数值为jsonpcallback,返回数据为{"code":0,"message":"ok"}
  5.      返回到前端的数据应该是jsonpcallback({"code":0,"message":"ok"})
3.设置response的Header属性实现 
</>复制代码 
  1. 1.springboot实现(较新的版本支持)
  2. 1.1 方法级别
  3. 注解@CrossOrigin支持方法级别的跨域，支持多个不同的域，没有测试过
</>复制代码 
  1. @CrossOrigin(origins="http://xxx.com.cn",allowCredentials="false",maxAge=3600)
</>复制代码 
  1. 1.2 应用级别
</>复制代码 
  1. @Configuration
  2. public class WebAppConfig extends WebMvcConfigurerAdapter {
  3.     /**
  4.      * 跨域支持
  5.      */
  6.     @Override
  7.     public void addCorsMappings(CorsRegistry registry) {
  8.     registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowCredentials(false).maxAge(3600);
  9.     }
  10. }
</>复制代码 
  1. 2.直接使用response来做处理
</>复制代码 
  1.  response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域访问的域，可以是通配符”*”；
  2.  response.setHeader("Access-Control-Allow-Methods", "POST, GET");
  3.  response.setHeader("Access-Control-Max-Age", "1800");
  4.  response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
  5.  response.setHeader("Access-Control-Allow-Credentials", "true");
4.jsonp方式实现 
</>复制代码 
  1. 1.客户端发送ajax请求时，设置datatype为jsonp
  2. 2.服务端处理
  3. (1)写一个方法实现接口MethodInterceptor，重写invoke方法
</>复制代码 
  1. String callback = request.getParameter("callback");
  2. if(StringUtils.isNotBlank(callback)){
  3.    Object ret = invocation.proceed();
  4.    return callback+"("+ret+")";
  5. }else{
  6.    Object ret = invocation.proceed();
  7.    return ret;
  8. }

(2)使用fastjson的JSONPObject 来实现

</>复制代码 
  1.    JSONPObject ret = new JSONPObject(callback);
  2.    ret.addParameter(data);
  3.    //callback就是参数callback的值
  4.    //addParameter就是要返回的数据
  5.    //调用toJSONString即可看到结果

备注：第一次写技术博客，如果有错误，请指正，共同进步。

GPU云服务器 云服务器 端跨域 javaweb 云服务器 javaweb服务器 javaweb 腾讯云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/67257.html

相关文章

  • javaweb服务端跨域支持

    摘要：跨域是浏览器拦截了服务器端返回的相应，不是拦截了请求。通过来实现跨域使用来实现跨域可以解决下不能跨域的问题，仅仅支持请求服务端多加一个参数，在返回数据时用把具体的数据包裹起来，传回前端。 项目开发为了支持web浏览器ajax的直接请求，涉及到了跨域的需求，通过学习对跨域有了更深入的认识，现在总结一下： 1.跨域说明 跨域指请求和服务的域不一致，浏览器和H5的ajax请求有影响，而对服务...

    kycool 评论0 收藏0

  • 简单设置，解决使用webpack前后端跨域发送cookie的问题

    摘要：最近用来做项目，用来做前端自动化构建。会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。要向后端发送，前端也需要有相应的配置。另外还要将设为。 最近用vue来做项目，用webpack来做前端自动化构建。webpack-dev-server会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。 刚开始时，没有用vue-cli来构建项目，而是参考了github上...

    wwq0327 评论0 收藏0

  • CORS：跨域解决方案

    摘要：是一种新的服务端跨域方案。实现方式非常简单。优点相比，可以支持的所有请求方式，只支持方式因为本质是通过标签的属性访问。缺点低版本浏览器不支持。 CORS是一种新的服务端跨域方案。实现方式非常简单。 优点：相比jsonp，可以支持http的所有请求方式，jsonp只支持get方式（因为本质是通过script标签的src属性访问url）。支持ajax。缺点：低版本浏览器（IE9-）不支持。...

    EddieChan 评论0 收藏0

  • Jsonp及其实现原理

    摘要：同源策略，它是由提出的一个著名的安全策略，现在所有支持的浏览器都会使用这个策略。客户端在对文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像，但其实并不一样。 参考资料 一、先说说JSON 首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。 JSON的优点： 基于纯文本，跨平台传递极其简单； Javas...

    TesterHome 评论0 收藏0

  • 跨域解决方案（易懂，持续更新中……）

    摘要：跨域总结跨域思路跨域解决方案一般分为两种前端解决，后端解决前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如想要访问豆瓣的接口很，但是如果请求的是就不存在跨域反向代理就是截取之后重写请求将请求转发 跨域总结 1.跨域思路 跨域解决方案一般分为两种：前端解决，后端解决 1.1 前端解决方案 通过前端解决的思想就是，通过设置中间件把跨域的请求转发...

    wupengyu 评论0 收藏0

发表评论

登陆后可评论

0条评论

dadong

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<