学习JavaScript（4）AJAX跨域_html javascript解压zip数据-CSDN博客

本文链接：https://blog.csdn.net/Echianer/article/details/109614446

文章目录

前言
一、html文档
- 1.创建一个html文档，用js写ajax请求
二、Nginx配置
三、打开网址
- 1.在本地地址打开
总结

前言

学习JavaScript（2）AJAX基础

我们在学习AJAX时难免需要跨域请求服务器。然而我们往往有时无法同时设置后端和前端来调整同源策略。这里我使用Nginx代理服务器做跨域AJAX请求

一、html文档

1.创建一个html文档，用js写ajax请求

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <script type="text/javascript">

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log(xhr.responseText);
                } else {
                    console.log("request was unsucessful: " + xhr.status);
                }
            }
        }
        xhr.open("get", "http://localhost:8081/pinyin/你好世界/", false);
        //这里xhr.open()的url是localhost：8081也是之后我们要打开的网页
        xhr.send(null);

    </script>
</body>

</html>

这段代码运行会提示跨域不同源，我们需要使用Nginx构建代理服务器然后再运行，我们这时需要记录下存放的html的路径以便配置Nginx的时候使用

以下是我用的api示例网址，感谢作者skiy分享

https://doc.apijs.cn/docs/freeapi/pinyin

二、Nginx配置

1.Nginx下载

在这里插入图片描述

首先我们到官方下载Nginx

2.解压zip

在这里插入图片描述
解压zip文件到路径，记住路径不能出现中文名

3.找到nginx.conf

在这里插入图片描述
我这里使用vscode进行修改nginx.conf

4.修改nginx.conf

server {
        listen          8081;
        root            E:/nginx/test/1; 
        index           index.htm index.html;
        server_name     localhost;
        charset         utf-8;


        location /pinyin {
            proxy_pass  https://api.apijs.cn;
            # index  index.html index.htm;
            
            proxy_set_header        X-Real-IP          $remote_addr;
        }
    }

server部分是我们需要修改的。其中
root 放的是html的路径
location/pinyin 说明我们请求的是https://api.apijs.cn/pinyin/
proxy_pass 放的是请求的路径https://api.apijs.cn
localhost：8081 是我们声明的本地地址的url

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen          8081;
        root            E:/nginx/test/1;
        index           index.htm index.html;
        server_name     localhost;
        charset         utf-8;


        location /pinyin {
            proxy_pass  https://api.apijs.cn;
            # index  index.html index.htm;
            
            proxy_set_header        X-Real-IP          $remote_addr;
        }
    }
}