跨域问题解决方案

男娘i 2022-01-28 12:45 493阅读 0赞

跨域问题解决方案

五种网站跨域解决方案

  1. 使用jsonp解决网站跨域 只能支持get 不支持post

    2.使用HttpClient内部转发 效率低 发送两次请求
    3.使用设置响应头允许跨域
    4.基于Nginx搭建企业级API接口网关 保证域名和端口一直 以项目区分反向代理到真实服务器地址
    5.使用Zuul搭建微服务API接口网关

使用设置响应头允许跨域:

在B项目中添加：

response.setHeader(“Access-Control-Allow-Origin”, “*“);

  1. package com.toov5.controller;
  3. import java.util.HashMap;
  4. import java.util.Map;
  6. import javax.servlet.http.HttpServletResponse;
  8. import org.springframework.boot.SpringApplication;
  9. import org.springframework.boot.autoconfigure.SpringBootApplication;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  13. @RestController
  14. @SpringBootApplication
  15. public class BIndexController {
  16.     @RequestMapping("/getBInfo")
  17.    public Map<String, Object> getBInfo(HttpServletResponse response){
  18.         //告诉浏览器 允许跨域   这段代码应该放在过滤器里面的
  19.         response.setHeader("Access-Control-Allow-Origin", "*");  //*代表所有 可以a.toov5.com专门的
  20.        //提供给Ajax嗲用
  21.        Map<String,Object> result = new HashMap<String, Object>();
  22.        result.put("code", 200);
  23.        result.put("msg", "登录成功");
  24.        return result;
  25.    }
  27.     public static void main(String[] args) {
  28.         SpringApplication.run(BIndexController.class, args);
  30.     }
  31. }

1179709-20181121162146395-1607862452.png

JSONP解决方案：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  9. <script type="text/javascript"
  10.     src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  11. <script type="text/javascript">
  12.     $(document).ready(function() {
  13.         $.ajax({
  14.             type : "POST",
  15.             async : false,
  16.             url : "http://b.toov5.com:8081/getBInfo",
  17.             dataType : "jsonp",
  18.             jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数 
  19.             success : function(data) {
  20.                 alert(data["code"]);   //获取到code
  21.             },
  22.             error : function() {
  23.                 alert('fail');
  24.             }
  25.         });
  27.     });
  28. </script>
  29. </head>
  30. <body>我是A项目 正在调用B项目
  31. </body>
  32. </html>

　　

　　首先该成JSONP的 形式 

  1. dataType : "jsonp",
  2. jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数

访问： （生成的随机数）

1179709-20181121163750232-1396425744.png

1179709-20181121163822226-493801735.png

1179709-20181121163853272-414599488.png

注意 不支持post请求！

HttpClient方案转发：

相当于发送两次请求

隐藏了真实地址 Nginx反向代理类似

同时需要@ResponseBody哦 因为返回json格式

修改前段访问的接口 保持一致：

1179709-20181121175845287-2055574803.png

  1. $(document).ready(function() {
  2.         $.ajax({
  3.             type : "POST",
  4.             async : false,
  5.             url : "http://a.toov5.com:8080/forwardB",
  6.             dataType : "json",
  7.             success : function(data) {
  8.                 alert(data["code"]);   //获取到code
  9.             },
  10.             error : function() {
  11.                 alert('fail');
  12.             }
  13.         });
  15.     });
  16. url : "http://a.toov5.com:8080/forwardB",
  17.             dataType : "json",
  18.             success : function(data) {
  19.                 alert(data["code"]);   //获取到code
  20.             },
  21.             error : function() {
  22.                 alert('fail');
  23.             }
  24.         });
  26.     });

　　

HttpClient：

  1. package com.toov5.controller;
  3. import java.io.IOException;
  5. import org.apache.http.HttpEntity;
  6. import org.apache.http.HttpStatus;
  7. import org.apache.http.client.config.RequestConfig;
  8. import org.apache.http.client.methods.CloseableHttpResponse;
  9. import org.apache.http.client.methods.HttpGet;
  10. import org.apache.http.client.methods.HttpPost;
  11. import org.apache.http.entity.StringEntity;
  12. import org.apache.http.impl.client.CloseableHttpClient;
  13. import org.apache.http.impl.client.HttpClients;
  14. import org.apache.http.util.EntityUtils;
  15. import org.slf4j.Logger;
  16. import org.slf4j.LoggerFactory;
  18. import com.alibaba.fastjson.JSONObject;
  20. public class HttpClientUtils {
  21.     private static Logger logger = LoggerFactory.getLogger(HttpClientUtils.class); // 日志记录
  23.     private static RequestConfig requestConfig = null;
  25.     static {
  26.         // 设置请求和传输超时时间
  27.         requestConfig = RequestConfig.custom().setSocketTimeout(2000).setConnectTimeout(2000).build();
  28.     }
  30.     /**
  31.      * post请求传输json参数
  32.      * 
  33.      * @param url
  34.      *            url地址
  35.      * @param json
  36.      *            参数
  37.      * @return
  38.      */
  39.     public static JSONObject httpPost(String url, JSONObject jsonParam) {
  40.         // post请求返回结果
  41.         CloseableHttpClient httpClient = HttpClients.createDefault();
  42.         JSONObject jsonResult = null;
  43.         HttpPost httpPost = new HttpPost(url);
  44.         // 设置请求和传输超时时间
  45.         httpPost.setConfig(requestConfig);
  46.         try {
  47.             if (null != jsonParam) {
  48.                 // 解决中文乱码问题
  49.                 StringEntity entity = new StringEntity(jsonParam.toString(), "utf-8");
  50.                 entity.setContentEncoding("UTF-8");
  51.                 entity.setContentType("application/json");
  52.                 httpPost.setEntity(entity);
  53.             }
  54.             CloseableHttpResponse result = httpClient.execute(httpPost);
  55.             // 请求发送成功，并得到响应
  56.             if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
  57.                 String str = "";
  58.                 try {
  59.                     // 读取服务器返回过来的json字符串数据
  60.                     str = EntityUtils.toString(result.getEntity(), "utf-8");
  61.                     // 把json字符串转换成json对象
  62.                     jsonResult = JSONObject.parseObject(str);
  63.                 } catch (Exception e) {
  64.                     logger.error("post请求提交失败:" + url, e);
  65.                 }
  66.             }
  67.         } catch (IOException e) {
  68.             logger.error("post请求提交失败:" + url, e);
  69.         } finally {
  70.             httpPost.releaseConnection();
  71.         }
  72.         return jsonResult;
  73.     }
  75.     /**
  76.      * post请求传输String参数 例如：name=Jack&sex=1&type=2
  77.      * Content-type:application/x-www-form-urlencoded
  78.      * 
  79.      * @param url
  80.      *            url地址
  81.      * @param strParam
  82.      *            参数
  83.      * @return
  84.      */
  85.     public static JSONObject httpPost(String url, String strParam) {
  86.         // post请求返回结果
  87.         CloseableHttpClient httpClient = HttpClients.createDefault();
  88.         JSONObject jsonResult = null;
  89.         HttpPost httpPost = new HttpPost(url);
  90.         httpPost.setConfig(requestConfig);
  91.         try {
  92.             if (null != strParam) {
  93.                 // 解决中文乱码问题
  94.                 StringEntity entity = new StringEntity(strParam, "utf-8");
  95.                 entity.setContentEncoding("UTF-8");
  96.                 entity.setContentType("application/x-www-form-urlencoded");
  97.                 httpPost.setEntity(entity);
  98.             }
  99.             CloseableHttpResponse result = httpClient.execute(httpPost);
  100.             // 请求发送成功，并得到响应
  101.             if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
  102.                 String str = "";
  103.                 try {
  104.                     // 读取服务器返回过来的json字符串数据
  105.                     str = EntityUtils.toString(result.getEntity(), "utf-8");
  106.                     // 把json字符串转换成json对象
  107.                     jsonResult = JSONObject.parseObject(str);
  108.                 } catch (Exception e) {
  109.                     logger.error("post请求提交失败:" + url, e);
  110.                 }
  111.             }
  112.         } catch (IOException e) {
  113.             logger.error("post请求提交失败:" + url, e);
  114.         } finally {
  115.             httpPost.releaseConnection();
  116.         }
  117.         return jsonResult;
  118.     }
  120.     /**
  121.      * 发送get请求
  122.      * 
  123.      * @param url
  124.      *            路径
  125.      * @return
  126.      */
  127.     public static JSONObject httpGet(String url) {
  128.         // get请求返回结果
  129.         JSONObject jsonResult = null;
  130.         CloseableHttpClient client = HttpClients.createDefault();
  131.         // 发送get请求
  132.         HttpGet request = new HttpGet(url);
  133.         request.setConfig(requestConfig);
  134.         try {
  135.             CloseableHttpResponse response = client.execute(request);
  137.             // 请求发送成功，并得到响应
  138.             if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
  139.                 // 读取服务器返回过来的json字符串数据
  140.                 HttpEntity entity = response.getEntity();
  141.                 String strResult = EntityUtils.toString(entity, "utf-8");
  142.                 // 把json字符串转换成json对象
  143.                 jsonResult = JSONObject.parseObject(strResult);
  144.             } else {
  145.                 logger.error("get请求提交失败:" + url);
  146.             }
  147.         } catch (IOException e) {
  148.             logger.error("get请求提交失败:" + url, e);
  149.         } finally {
  150.             request.releaseConnection();
  151.         }
  152.         return jsonResult;
  153.     }
  155. }

Controller：

  1. package com.toov5.controller;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  9. import com.alibaba.fastjson.JSONObject;
  11. @Controller
  12. @SpringBootApplication
  13. public class AIndexController {
  15.  @RequestMapping("/aIndexJsp")
  16.   public String  AIndexJsp() {
  17.       return "aIndex";
  18.   }
  19.     //使用httpClient进行访问b接口
  20.     @RequestMapping("/forwardB")
  21.     @ResponseBody   //这里一定要为 json形式！！！  jsp中的ajax访问的路径
  22.     public JSONObject forwardB() {
  23.         JSONObject result = HttpClientUtils.httpGet("http://b.toov5.com:8081/getBInfo");
  24.         return result;
  25.     }
  28.     public static void main(String[] args) {
  29.         SpringApplication.run(AIndexController.class, args);
  30.     }
  33. }

1179709-20181121175253478-1534186760.png

B的controller：

  1. package com.toov5.controller;
  3. import java.util.HashMap;
  4. import java.util.Map;
  6. import javax.servlet.http.HttpServletResponse;
  8. import org.springframework.boot.SpringApplication;
  9. import org.springframework.boot.autoconfigure.SpringBootApplication;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  13. @RestController
  14. @SpringBootApplication
  15. public class BIndexController {
  16.     @RequestMapping("/getBInfo")
  17.    public Map<String, Object> getBInfo(HttpServletResponse response){
  18.         //告诉浏览器 允许跨域   这段代码应该放在过滤器里面的
  19. //        response.setHeader("Access-Control-Allow-Origin", "*");  //*代表所有 可以a.toov5.com专门的
  20.        //提供给Ajax嗲用
  21.        Map<String,Object> result = new HashMap<String, Object>();
  22.        result.put("code", 200);
  23.        result.put("msg", "登录成功");
  24.        return result;
  25.    }
  29.     public static void main(String[] args) {
  30.         SpringApplication.run(BIndexController.class, args);
  32.     }
  33. }

Nginx 方案：

api.toov5.com/a

api.toov5.com/b 

  1.       通过Nginx 转发到不同的 项目

Zuul方案： 

  1.   类似Nginx 修改Zuul的配置yml

不管访问A项目还是B项目 首先保证域名端口号统一

请求先到Nginx 判断域名相同 项目名字不同 转发到某个项目

发表评论

表情：
评论列表 （有 0 条评论，493人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Spring解决跨域问题方案

    项目中需要前后端分离部署，所以需要解决跨域的问题。 跨域可以在前端通过 JSONP 来解决，但是 JSONP 只可以发送 GET 请求，无法发送其他类型的请求，在 REST

    Dear 丶Dear 丶/ 0 赞/ 341 阅读