跨域的五种解决方案

跟多介绍可参考跨域的五种解决方案笔记和相关资料下载1. 什么是跨域浏览器不允许执行其他网站的脚步ajax浏览器的同源策略造成的例如发起ajax请求时如果IP、端口、协议任一不同则都属于跨域。例如以下案例中A网站需要请求B网站接口A网站B网站是否跨域说明http://192.162.1.1:8080http://192.162.2.2:8080存在跨域IP不同http://192.162.1.1:8080http://192.162.1.1:8081存在跨域端口不同http://192.162.1.1:8080https://192.162.1.1:8080存在跨域协议不同http://192.162.1.1:8080http://192.162.1.1:8080不存在跨域协议、ip、端口全部相同2. 演示跨域问题步骤首先在右上角下载本章节相关资料将demo.html 放入Nginx的html目录中_默认已经放进去了_双击nginx.exe启动Nginx–启动Nginx运行jar包java -jar kexuekt01.jar 或通过idea打开kexuekt01项目– 启动项目浏览器访问http://127.0.0.1/demo.html– 看效果F12打开浏览器控制台查看跨域error错误信息重要知识点存在跨域时Java接口是可以正常进行业务处理的只是浏览器不能接收后台返回的数据并在图 1浏览器控制台输出的跨域错误。3. 解决跨域的五种方法jsonp内部HttpClient远程调用nginx反向代理设置响应头允许跨域 response.setHeader(“Access-Control-Allow-Origin”, “*”);SpringBoot注解CrossOrigin3.1 Jsonp解决跨域演示前端代码$.ajax({type:get,dataType:jsonp,jsonp:callback,//请求中重写回调函数的名字url:http://127.0.0.1:8080/kexue/user,success:function(data){alert(data.response);}},json);后台代码后台需要接收的jsonp:callback中的callback参数返回参数格式必须为callback({object});RequestMapping(/kexue/user)publicStringdemo(Stringcallback){JSONObjectobjJSONUtil.createObj();obj.put(code,200);obj.put(response,调用成功);// 返回格式callback({object});returncallback(obj);}说明Jsonp的使用方式较为麻烦解决跨域一般不会使用该方法。3.2 内部HttpClient远程调用启动两个后台端口18080自己公司的项目解决了跨域问题端口28081模拟第三方项目接口没有解决跨域问题8080端口项目CrossOrigin // 跨域注解 RestController public class Demo1 { RequestMapping(/kexue/user) public JSONObject demo() { String body HttpRequest.get(127.0.0.1:8081/kexue/user2).execute().body(); JSONObject obj JSONUtil.parseObj(body); return obj; } }8081端口项目第三方接口RequestMapping(/kexue/user2) public JSONObject demo() { JSONObject obj JSONUtil.createObj(); obj.put(code, 200); obj.put(response, 第三方接口); return obj; }注修改端口号便于测试 -Dserver.port8081说明HttpClient这种方式适合调用第三方接口。例如调用第三方接口时如果前端直接调用第三方接口会报跨域问题第三方接口没有解决跨域问题那么就只能通过后台HttpClient的方式进行调用。3.3 Nginx反向代理前端代码$.ajax({ type:get, url:http://127.0.0.1:80/kexue/user, success:function (data) { //请求成功后的处理 alert(data.response); } }, json);后端代码RequestMapping(/kexue/user) public JSONObject demo() { JSONObject obj JSONUtil.createObj(); obj.put(code, 200); obj.put(response, 调用成功); // 返回格式callback({object}); return obj; }nginx.confworker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } #拦截所有以/kexue开头的请求 location /kexue { index proxy_set_header Host $host; index proxy_set_header X-Real-IP $remote_addr; index proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:8080; #后端服务地址 } } }说明使用Nginx方向代理的前提是前端代码vue需要和Nginx服务在一台物理机上如果满足以上条件就优先考虑通过Nginx反向代理来解决跨域问题。3.4 设置响应头允许跨域前端代码$.ajax({ type:get, url:http://127.0.0.1:8080/kexue/user, success:function (data) { //请求成功后的处理 alert(data.response); } }, json);后端代码RequestMapping(/kexue/user) public JSONObject demo(HttpServletResponse response) { JSONObject obj JSONUtil.createObj(); obj.put(code, 200); obj.put(response, 调用成功); // *允许所有网站跨域 response.setHeader(Access-Control-Allow-Origin, *); return obj; }说明通常都是在拦截器中来配置“设置响应头允许跨域”。3.5 CrossOrigin注解前端代码$.ajax({ type:get, url:http://127.0.0.1:8080/kexue/user, success:function (data) { //请求成功后的处理 alert(data.response); } }, json);后端代码CrossOrigin // 跨域注解 RestController public class Demo1 { RequestMapping(/kexue/user) public JSONObject demo() { JSONObject obj JSONUtil.createObj(); obj.put(code, 200); obj.put(response, 调用成功); return obj; } }说明CrossOrigin注解底层通过Spring的拦截器功能往response里添加 Access-Control-Allow-Origin等响应头信息。response.setHeader(“Access-Control-Allow-Origin”, “*”); ✨个人博客首页 祁_z原创不易感觉对自己有用的话就❤️点赞收藏评论把。