nginx无法跨域一直提示404

最新推荐文章于 2024-07-25 16:09:20 发布

天心天地生

最新推荐文章于 2024-07-25 16:09:20 发布

阅读量4.3k

点赞数 1

分类专栏：工具使用

本文链接：https://blog.csdn.net/tianxintiandisheng/article/details/102547783

版权

工具使用专栏收录该内容

44 篇文章 0 订阅

订阅专栏

问题描述：

使用nginx无法跨域一直提示404

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Stylesheet" type="text/css" href="register.css" />
</head>
<body>
<div class="bootBox">
    <div class="title">后台登录</div>
    <div class="input">
        <img src="img/id.jpg">
        <input  type="text" class="id" maxlength="11" >
    </div>
    <div class="input">
        <img src="img/password.jpg">
        <input type="password" class="password" maxlength="18" >
    </div>
    <div class="msg">
        <!--密码错误-->
        <!--用户不存在-->
    </div>
    <button class="logOn">登录</button>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="register.js"></script>
<!--<script src="postJquery.js"></script>-->
</body>
</html>

js代码

$(".logOn").click(function () {
    console.log("值为: " + $(".id").val());
    console.log("值为: " + $(".password").val());
    var id=$(".id").val();
    var password=$(".password").val();
    var data="name=" + id + "&pwd=" + password;/*post数据的格式与查询字符串格式相同,也可使用serialize()函数*/

    var oAjax = new XMLHttpRequest(); /*创建一个XHR对象*/
    console.log(oAjax.readyState);
    oAjax.open('post', '/carrots-admin-ajax/a/login', true);/*调用方法open(),发起post请求*/
    oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); /*更改头部信息，使用XHR模拟表单提交*/
    oAjax.send(data);/*调用send()方法,传入某些数据*/

    oAjax.onreadystatechange = function(){ /*调用onreadystatechange()函数,每次onreadystate变化都会触发此函数*/
        // 通信成功时，状态值为4
        if (oAjax.readyState === 4){
            if (oAjax.status === 200){
                console.log(oAjax.responseText);
                returnText=JSON.parse(oAjax.responseText); /*使用parse()方法把json字符串解析为原生的JavaScript值*/
                if (returnText.code === 0) {
                    window.location.href = "http://dev.admin.carrots.ptteng.com/";
                }
                $(".msg").text(returnText.message);/*使用jquery更改提示信息*/
            } else {
                console.error(oAjax.statusText);/*返回的状态代码不是200，打印此时的http状态说明*/
            }
        }
    };
});

nginx配置文件（nginx.conf）

默认设置

listen       80;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   html;
    index  index.html index.htm;
}

#error_page  404              /404.html;

更改后设置

listen       80;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   html;
    index  index.html index.htm;
}
location /carrots-admin-ajax/ {
    proxy_pass http://dev.admin.carrots.ptteng.com/;
}

#error_page  404              /404.html;

错误提示：

问题解决过程

发现General中的资源请求url没有改变
发现Response Headers（响应头）中的server不是nginx
可能是nginx没起作用，继续去找关于nginx跨域的教程看一下

问题出现原因

对nginx的配置不够理解

问题解决方案

更改nginx关于root的设置
root是托管静态站点最关键的部分。如果你只是想用它来托管一些html和css文件，root部分要定义的就是这些文件存放的路径。

listen       80;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   C:\OldProjiect\Web-Task\JS-TASK\Task5;
    index  register.html;
}
location /carrots-admin-ajax/ {
    proxy_pass http://dev.admin.carrots.ptteng.com/;
}
#error_page  404              /404.html;