WebStrom : JavaScript ：Html : 跨域问题和简单的测试是否跨域的 html页面

最新推荐文章于 2024-02-26 13:39:05 发布

天有行-地无迹-千秋怎堪一剑扫

最新推荐文章于 2024-02-26 13:39:05 发布

阅读量1.2k

点赞数 1

分类专栏： Web javaScript grammar

本文链接：https://blog.csdn.net/weitaming1/article/details/104635242

版权

grammar 同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

javaScript

46 篇文章 0 订阅

订阅专栏

Web

2 篇文章 0 订阅

订阅专栏

报错信息：

initMap.html:1 Access to XMLHttpRequest at 'http://***/SuperMap/Data-jia3/tileset.json' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法：

打开tomcat安装目录 -> 打开 conf 目录 -> 打开web.xml文件

添加内容如下：

<filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET,POST,HEAD,PUT,DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

注意点：

这段内容不能放在web.xml的最后位置（和开始位置），虽然不知道为什么，但是会导致跨域失败。

所以，需要放在web.xml的指定位置上：我的大概在600行处，

因为：

<!-- ================== Built In Filter Definitions ===================== -->  465行

<!-- ==================== Built In Filter Mappings ====================== -->  593行

这区域内是web.xml本身就有的关于“Filter”"Filter Mapping" 的地方。

关闭tomcat ,重启后，跨域成功。

制作demo:

制作简单的html，配合ajax 的请求功能做一个简单demo来测试请求的url是否跨域的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试：jquery请求url测试跨域情况</title>
</head>
<body>
<div>
    输入测试URL:
    <input type="text" id="inputUrl" style="width:500px;" value="http://****/SuperMap/Tile/World/Image/tms.xml">
    <button onclick="sendUrl()">发送url</button>
</div><br/>
输出结果：<br/>
<div id="outputResponse" style="width: 500px;height: 500px">
</div>
<script>
    var s = "http://***/SuperMap/Data-jia3/tileset.json";
    var ss = "http://****/SuperMap/Tile/World/Image/tms.xml";
    function dealSuccessResponse(response){
        console.log("result",response);
        var outputDoc = document.getElementById("outputResponse");
       
        outputDoc.innerHTML = JSON.parse(response);// JSON.stringify(response);
    }


    function sendUrl() {
        //发送消息
        // var url = mapXmlUrl;
        var url = document.getElementById("inputUrl").value;
        // var xmlSerializer = new XMLSerializer();
        // var str = xmlSerializer.serializeToString(featureRequest);
        var requestOpt = {
            type:'POST',
            contentType:'text/xml',
            data:"",
            success: function (req) {
                // 执行回调函数
                if (dealSuccessResponse){
                    dealSuccessResponse(req);
                }
            },
            timeout :10
        };

        this.sendRequest(url,requestOpt);

    }



    function sendRequest(url, opt) {
        //方法：fetch : https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
        fetch(url,{
            method : opt.type,
            body: opt.data
        }).then(function (respone) {
            if (respone.ok){
                return respone;
            }
            throw new Error('Network respone was not ok.');
        }).then(function (respone) {
            if (opt.success){
                opt.success(respone);
            }
        })
    }


</script>
</body>
</html>

参考博客：

tomcat解决跨域问题 --解决了。

Tomcat通过CORS解决跨域问题 : 介绍了web.xml中的标签的简单含义。

WebStorm本地调试的跨域问题

跨域问题（CORS / Access-Control-Allow-Origin）

天有行-地无迹-千秋怎堪一剑扫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebStrom : JavaScript ：Html : 跨域问题和简单的测试是否跨域的 html页面

initMap.html:1 Access to XMLHttpRequest at 'http://218.207.195.169:8086/SuperMap/Data-jia3/tileset.json' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-A...
复制链接

扫一扫