javascript - 正确配置 vert.x 服务器以允许跨域资源共享 (CORS)

标签 javascript java html get vert.x

我正在尝试了解 vert.x 的 CORS 配置。我在this github repository找到了一个例子在 CORS 部分下。当我尝试时，只有 POST 示例似乎有效(preflight.html)。由于我还需要在我的一个项目中使用 GET (nopreflight.html)，因此我尝试修改该示例，但结果不佳。这就是我现在所拥有的:

服务器.java

package io.vertx.example.web.cors;
import io.vertx.core.AbstractVerticle;
import io.vertx.core.MultiMap;
import io.vertx.core.http.HttpMethod;
import io.vertx.example.util.Runner;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.handler.CorsHandler;
import io.vertx.ext.web.handler.StaticHandler;

import java.util.Map;
/*
 * @author <a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddadb0b1b2adb8ae9dbab0bcb4b1f3beb2b0" rel="noreferrer noopener nofollow">[email protected]</a>">Paulo Lopes</a>
 */
public class Server extends AbstractVerticle {

    // Convenience method so you can run it in your IDE
    public static void main(String[] args) {
        Runner.runExample(Server.class);
    }

    @Override
    public void start() throws Exception {

        Router router = Router.router(vertx);

        router.route().handler(CorsHandler.create("*")
                           .allowedMethod(HttpMethod.GET)
                           .allowedMethod(HttpMethod.POST)
                           .allowedMethod(HttpMethod.OPTIONS)
                           .allowedHeader("Access-Control-Request-Method")
                           .allowedHeader("Access-Control-Allow-Credentials")
                           .allowedHeader("Access-Control-Allow-Origin")
                           .allowedHeader("Access-Control-Allow-Headers")
                           .allowedHeader("X-PINGARUNER")
                           .allowedHeader("Content-Type"));

        router.get("/access-control-with-get").handler(ctx -> {
            ctx.response().setChunked(true);

            MultiMap headers = ctx.request().headers();
            /*for (String key : headers.names()) {
              ctx.response().write(key);
              ctx.response().write(headers.get(key));
              ctx.response().write("\n");
            }*/
            ctx.response().write("response ");
            ctx.response().end();
        });

        router.post("/access-control-with-post-preflight").handler(ctx -> { ctx.response().setChunked(true);

            MultiMap headers = ctx.request().headers();
            /*for (String key : headers.names()) {
              ctx.response().write(key);
              ctx.response().write(headers.get(key));
              ctx.response().write("\n");
            }*/
            ctx.response().write("response ");
            ctx.response().end();
        });

        // Serve the static resources
        router.route().handler(StaticHandler.create());

        vertx.createHttpServer()
        .requestHandler(router::accept)
        .listen(8080);
    }
}

nopreflight.html

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple use of Cross-Site XMLHttpRequest (Using Access Control)</title>
<script type="text/javascript">
        //<![CDATA[

        var invocation = new XMLHttpRequest();
        var url = 'http://localhost:8080/access-control-with-get/';
        var invocationHistoryText;
        var body = '<?xml version="1.0"?><person><name>Arun</name></person>';

        function callOtherDomain(){
            if(invocation)
            {
                invocation.open('GET', url, true);
                //invocation.setRequestHeader('X-PINGARUNER', 'pingpong');
                invocation.setRequestHeader('Content-Type', 'application/xml');
                invocation.onreadystatechange = handler;
                invocation.send();
            }
            else
            {
                invocationHistoryText = "No Invocation TookPlace At All";
                var textNode = document.createTextNode(invocationHistoryText);
                var textDiv = document.getElementById("textDiv");
                textDiv.appendChild(textNode);
            }

        }
        function handler()
        {
            if (invocation.readyState == 4)
            {
                if (invocation.status == 200)
                {
                    var response = invocation.responseXML;
                    //var invocationHistory = response.getElementsByTagName('invocationHistory').item(0).firstChild.data;
                    invocationHistoryText = document.createTextNode(response);
                    var textDiv = document.getElementById("textDiv");
                    textDiv.appendChild(invocationHistoryText);

                }
                else
                    alert("Invocation Errors Occured " + invocation.readyState + " and the status is " + invocation.status);
            }
            else
                console.log("currently the application is at " + invocation.readyState);
        }
        //]]>


    </script>
</head>
<body>
<form id="controlsToInvoke" action="">
    <p>
        <input type="button" value="Click to Invoke Another Site" onclick="callOtherDomain()" />
    </p>
</form>
<p id="intro">
    This page basically makes invocations to another domain using cross-site XMLHttpRequest mitigated by Access Control.  This is the simple scenario that is <em>NOT</em> preflighted, and the invocation to a resource on another domain takes place using a simple HTTP GET.
</p>
<div id="textDiv">
    This XHTML document invokes another resource using cross-site XHR.
</div>
</body>
</html>

预检.html

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple use of Cross-Site XMLHttpRequest (Using Access Control)</title>
<script type="text/javascript">
        //<![CDATA[

        var invocation = new XMLHttpRequest();
        var url = 'http://localhost:8080/access-control-with-post-preflight/';
        var invocationHistoryText;
        var body = '<?xml version="1.0"?><person><name>Arun</name></person>';

        function callOtherDomain(){
            if(invocation)
            {
                invocation.open('POST', url, true);
                invocation.setRequestHeader('X-PINGARUNER', 'pingpong');
                invocation.setRequestHeader('Content-Type', 'application/xml');
                invocation.onreadystatechange = handler;
                invocation.send();
            }
            else
            {
                invocationHistoryText = "No Invocation TookPlace At All";
                var textNode = document.createTextNode(invocationHistoryText);
                var textDiv = document.getElementById("textDiv");
                textDiv.appendChild(textNode);
            }

        }
        function handler()
        {
            if (invocation.readyState == 4)
            {
                if (invocation.status == 200)
                {
                    var response = invocation.responseText;
                    //var invocationHistory = response.getElementsByTagName('invocationHistory').item(0).firstChild.data;
                    invocationHistoryText = document.createTextNode(response);
                    var textDiv = document.getElementById("textDiv");
                    textDiv.appendChild(invocationHistoryText);

                }
                else
                {
                    alert("Invocation Errors Occured " + invocation.readyState + " and the status is " + invocation.status);
                }
            }
            else
            {
                console.log("currently the application is at " + invocation.readyState);
            }
        }
        //]]>


    </script>
</head>
<body>
<form id="controlsToInvoke" action="">
    <p>
        <input type="button" value="Click to Invoke Another Site" onclick="callOtherDomain()" />
    </p>
</form>
<p id="intro">
    This page POSTs XML data to another domain using cross-site XMLHttpRequest mitigated by Access Control.  This is the preflight scenario and the invocation to a resource on another domain takes place using first an OPTIONS request, then an actual POST request.
</p>
<div id="textDiv">
    This XHTML document POSTs to another resource using cross-site XHR.  If you get a response back, the content of that response should reflect what you POSTed.
</div>
</body>
</html>

编辑: 感谢您的建议，我修改了 Server.java 代码以使其更清晰，并且我了解到问题出在 nopreflight.html 文件中的处理函数。我按照如下方式解决了这个问题:

已编辑的Server.java

public class Server extends AbstractVerticle {

// Convenience method so you can run it in your IDE
public static void main(String[] args) {
    Runner.runExample(Server.class);
}

@Override
public void start() throws Exception {

    Router router = Router.router(vertx);

    Set<String> allowedHeaders = new HashSet<>();
    allowedHeaders.add("x-requested-with");
    allowedHeaders.add("Access-Control-Allow-Origin");
    allowedHeaders.add("origin");
    allowedHeaders.add("Content-Type");
    allowedHeaders.add("accept");
    allowedHeaders.add("X-PINGARUNER");

    Set<HttpMethod> allowedMethods = new HashSet<>();
    allowedMethods.add(HttpMethod.GET);
    allowedMethods.add(HttpMethod.POST);
    allowedMethods.add(HttpMethod.DELETE);
    allowedMethods.add(HttpMethod.PATCH);
    allowedMethods.add(HttpMethod.OPTIONS);
    allowedMethods.add(HttpMethod.PUT);


    router.route().handler(CorsHandler.create("*")
        .allowedHeaders(allowedHeaders)
        .allowedMethods(allowedMethods));

    router.get("/access-control-with-get").handler(ctx -> {
        HttpServerResponse httpServerResponse = ctx.response();
        httpServerResponse.putHeader("content-type", "text/html").end("<h1>Success</h1>");
    });

编辑 nopreflight.html

<script type="text/javascript">

    var xhttp = new XMLHttpRequest();
    var url = 'http://localhost:8080/access-control-with-get/';
    var invocationHistoryText;

    function callOtherDomain() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("textDiv").appendChild(document.createTextNode(xhttp.responseText));
            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
    }

</script>

最佳答案

CorsHandler.create("*") 将不起作用。
您需要在 CorsHandler.create("Regex String Here") 上提供一个正则表达式字符串。该正则表达式字符串需要是可在 Pattern.compile("Regex String Here") 上运行的有效 Java 正则表达式。因此，如果您想通过 CORS 处理允许任何协议(protocol):主机:端口(又名“*”)，您可以使用。

router.route().handler(CorsHandler.create(".*.");  //note the "." surrounding "*"

如果您想要对允许的协议(protocol):主机:端口进行细粒度控制，您可以创造性地使用正则表达式字符串。例如，要为来自 localhost 和任何端口的 http://或 https://设置 CORS 处理:

router.route().handler(CorsHandler.create("((http:\\/\\/)|(https:\\/\\/))localhost:\\d+");

您还可以使用一个处理程序来允许来源白名单，例如:

router.route().handler(CorsHandler.create("http:\\/\\/localhost:8080|https:\\/\\/128.32.24.45:\\d+|http:\\/\\/121.0.4.3:8080"));

关于javascript - 正确配置 vert.x 服务器以允许跨域资源共享 (CORS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47001182/

上一篇：html - 正确的 HTML5 (+ schema.org) 标记文章的发布日期和位置

下一篇：html - XPath 返回由 html 标签分割的字符串连接

相关文章：

java - XPage:从分类 View 创建 Json 字符串

javascript - 我试图有条件地显示 div，只有当页面被框架在我自己的域之外的域上时

javascript - 即使单击后也更改按钮颜色

html - 在另一个 div 之上放置一个对话框

javascript - 导致 "Maximum call stack size exceeded"的递归 javascript 函数

javascript - fetch 方法中的 http header 接口(interface)

javascript - 获取任何对象的所有方法？

c# - 为什么隐藏字段值没有发布在 mvc 4 中？

java - 在 RxJava 中超时取消任务

java - Spring Boot中如何获取请求的客户端IP地址？

©2024 IT工具网  联系我们