如何解决跨域问题

最新推荐文章于 2024-06-05 00:40:27 发布

小辛学java

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量1.8k

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/weixin_51236754/article/details/124087561

版权

遭遇问题：提供数据接口并非wsdl格式接口，需要跨域请求对方数据。

Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。它是一种API,允许客户端JavaScript 通过 HTTP 连接到远程服务器。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。

解决问题：跨域请求数据

跨域：简单来说IP与端口号存在任何不同都叫跨域，并非是两台电脑才存在跨域

解决方案：jsonp 前端解决（不推荐）

Nginx 通过配置nginx.conf

Okhttp 后台解决（推荐）后台通信不存在跨域请求，跨域只存在前后端通信

方案一： jsonp

连接： JSONP跨域问题的解决方法 | 该死的Hero (code-ken.github.io)

这是一种网上比较推荐的前端解决跨域问题的方案，未测试成功。希望师弟师妹可以填充这一内容。

二三方案现场测试可行性比较高。

方案二： nginx 解决跨域访问问题（windows版）

Nginx有两个版本一个是需要配置到linux中，另一个版本是windows版直接cmd进行操作。现场测试选择了windows版本。（建议学习一下linux）

下载地址：nginx: download

第一步测试：是否成功配置nginx

操作命令：

开启：start nginx

关闭：nginx.exe -s quit

重启：nginx.exe -s reload （修改配置文件后需要重启才生效）

测试方法：

1、找到解压后的文件路径位置打开cmd窗口

2、输入开始命令：start nginx (未报错误说明已经执行,这是已经执行的窗口)

3、在浏览器中输入localhost:80显示nginx的访问页面说明配置成功。

第二步测试：将nginx启动的服务器代理静态文件进行测试

发布本地接口：我发布的接口为http://192.168.1.17:8080/model/modelviewT2

访问接口页面：

2、配置nginx.conf文件

  location /api {
            root   html；
			   proxy_pass http://192.168.1.17:8080/;
        }

4、保存，cmd执行nginx.exe -s reload

3、在当前窗口删除index.html文件，新建index.html文件

Index.html测试文件内容：

<body>
<button onclick="a()"></button>
<script src="jquery-3.4.1.js"></script>
<script>
    function a() {
        $.ajax({
            type: "get",
            url: "api/model/modelviewT2",
            async:true, // 异步请求
            cache:false, // 设置为 false 将不缓存此页面
            dataType: 'json', // 返回对象
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                // 请求失败函数
                console.log("false");
            }
        })
    }

</script>
</body>

4、浏览器输入localhost请求（注：localhost:80==localhost）

此时访问成功，所有请求localhost:8080被localhost:80/api代理。

错误结果：检查是否重启nginx和ajax 访问路径是否错误。

第一个为CORS浏览器拦截信息。浏览器一般不支持跨域请求。

--跨域问题（CORS），因为程序调用的是远程服务器的API，服务器不允许跨域调用。

同时Ajax不支持发送跨域请求；

第三步测试：

可通过另一台服务器发布一接口，在nginx中配置，（本地测试浏览器默认请求安全所以不需要配置）

location /api {
            root   html;
            proxy_pass http://10.97.56.165:9315/;
			     proxy_set_header Host $host;
                 proxy_set_header X-Real-Ip $remote_addr;
                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                 proxy_set_header X-Forworded-For $http_x_forwarded_for;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection "upgrade";
			index index.html;
        }

保存，cmd输入重新启动命令，可以去index页面测试了

方案三 okhttp技术用于后台交互，后台发送请求是不存在跨域访问的

1、导入支持

!--okhttp 插件依赖-->
    <dependency>
      <groupId>com.squareup.okhttp3</groupId>
      <artifactId>okhttp</artifactId>
      <version>3.2.0</version>
    </dependency>

2、通过发布的接口在test中进行测试。

@Test
public void okhttp(){
    try {
        System.out.println(run(url));   //这里url自己找服务器发布一个接口测试
    } catch (IOException e) {
        e.printStackTrace();
    }

}
String run(String url) throws IOException{
    OkHttpClient client = new OkHttpClient();
    Request request = new Request.Builder().url(url).build();
    Response response = client.newCall(request).execute();
    if (response.isSuccessful()) {
        return response.body().string();
    } else {
        throw new IOException("Unexpected code " + response);
    }
}

通过本地发布接口测试