nginx解决静态页面中ajax跨域方案配置

本文介绍: 有些老项目遗留的静态页面使用 jquery中ajax 又不想使用 webpack 或者 g ul p 启动，用Ngin x 配置跨域问题。然后进入 nginx conf下的 nginx.conf 下使用编辑器 vscode 或者其他编辑器打开进行配置信息修改。配置好后使用命令 nginx –s reload （在nginx 文件夹下启动 cmd 终端后输入命令重启Ngin x）然后在浏览器输入 localhost:4000 出现如下图信息这Nginx配置成功。配置完成后重启Nginx cmd中输入命令 nginx –s reload。

nginx 解决 静态 页面中ajax 跨域 方案 配置

有些老项目遗留的静态页面使用jquery中ajax 又不想使用webpack 或者 g ul p 启动，用Nginx配置跨域问题

下载安装Nginx 下载链接：Nginx下载根据你的电脑下载对应安装包
在这里插入图片描述
注意：解压安装的时候不要在有中文名的文件夹下，否则会有报错

双击 nginx.exe 启动Nginx 可以在任务管理器中查看

 然后进入 nginx conf下的 nginx.conf 下使用编辑器vscode 或者其他编辑器打开进行配置信息修改

server {
 	listen 4000;#端口默认80端口
    server_name localhost;#域名
}

配置好后使用命令 nginx –s re load （在nginx 文件夹下启动 cmd 终端后输入命令重启Nginx）
在这里插入图片描述

然后在浏览器输入localhost:4000 出现如下图信息这Nginx配置成功
在这里插入图片描述
以上配置完成后下面来配置ajax配置跨域问题

server {
        listen       4000;#端口
        server_name  localhost;#域名
        add_header Access-Control-Allow-Origin *;#允许跨域

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           root   D:/newProject/demo;#本地项目路径
           index  index.html index.htm;#目录下有index.html直接打开页面
           autoindex on;#目录下没有index.html则直接打开文件夹显示所有文件
        }

        location /xxx/ {  # /xxx/ 为ajax接口匹配项 例如接口为: xxx/abc/abs?aa=1&amp;bb=2
            proxy_pass http://111.111.111.11:8090;# 测试请求地址为你项目具体请求地址
            #以下为Ajax中跨域配置项
   			add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        }     
}