Skip to content

利用nginx实现html跨域请求第三方接口

利用nginx实现html跨域请求第三方接口

  • what: 利用nginx实现html跨域请求第三方接口
  • where: win
  • when: 2022.4.28
  • who: JRT
  • why: 记录
  • how:

目标

在本地利用nginx和html实现html的跨域请求

nginx配置

 server {
        listen       5400;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            add_header Access-Control-Allow-Methods *;
            root   html;
            index  index.html index.htm;
        }
        location  /api {
            proxy_pass https://1.1.1.1:50000/;
        }

html写法

<html>
<head></head>
<body>
<form id="form1">

    <input type="text" name="CompanyDB" id="CompanyDB"/> <br>
    <input type="text" name="UserName" id="UserName"/> <br>
    <input type="text" name="Password" id="Password"/> <br>
    <button type="button" onclick="sub()">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script type="text/javascript">

    function sub() {
        var data={};
        data.CompanyDB=$("#CompanyDB").val();
        data.UserName=$("#UserName").val();
        data.Password=$("#Password").val();
        alert("1000");
        alert(data)

        alert(JSON.stringify(data));


        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            url: '/api/b1s/v1/Login',
            data: JSON.stringify(data),
            //请求成功
            success: function (result) {
                console.log(result.status);
                 console.log(result);
                console.log("bbb");
            },
            //请求失败,包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                console.log("aaa");
            }
        });


    }
</script>

</body>

</html>