用nginx解决前端跨域问题

写服务器写接口模拟后端

首先自己用node写了一个服务器接口,前提安装了node.js

npm init -y

npm i express

创建app.js

​
const express = require("express");
const app = express();
app.get("/getList", (req, res) => {
    res.send({
        status: 0,
        message: "请求成功",
        data: [
            { id: 1, name: "张三", age: 20 },
            { id: 2, name: "李四", age: 22 },
            { id: 3, name: "王五", age: 23 },
        ]
    })
})
app.listen(666, () => {
    console.log("http://localhost:666/getList");
})

​

node app.js运行成功，接口创建成功

跨域啊跨域

前端创建index..html运行，发起请求，就看到跨域

 

nginx实现跨域 

参考博主

安装官网 nginx: download

启动nginx

解压双击nginx.exe 

找到nginx解压目录下，鼠标右键，找到git bash打开（没有git工具那就打开命令行进入当前目录）输入命令start ./nginx.exe回车即启动了nginx服务.

输入localhost回车看下图，启动成功 

修改配置

在安装nginx目录下，找到conf/nginx.conf配置可直接复制

#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_names_hash_bucket_size 128;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       8888;
        server_name  test-local.test.com;
        # 这里是你要代理的测试环境域名加上-local
        # 比如你的项目测试环境为a.test.com,你本地此处可以设置为a-local.test.com,当然你可以随便设置
#这里说明了如果是http://test-local.test.com:8888/则说明跨域，用以下http://127.0.0.1:666/请求
        location /{
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
          add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
          #proxy_pass 你要跨域的的接口地址
          proxy_pass    http://127.0.0.1:666/;
        }
#这里说明了如果是http://test-local.test.com:8888/api/则说明跨域，用以下http://127.0.0.1:666/请求
         location ^~/api/{
 add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
          add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			rewrite ^/api/(.*)$ /$1 break;
			#proxy_pass 你要跨域的的接口地址
			proxy_pass http://127.0.0.1:666/;
		}

    }
}

本机dns配置

(如果上面不是test-local.test.com，而直接是你本地localhost则可以直接将test-local.test.com改为localhost或者127.0.0.1就可以，不然配置dns解析！）

找到目录C:\Windows\System32\drivers\etc，打开hosts文件，修改文件,加入

127.0.0.1 a-local.test.com

检查配置和重启

进入安装的目录输入nginx -t 检查配置是否有问题

 继续输入nginx -s reload重启(nginx配置文件修改后都要重启nginx才会生效)

刷新dns

ipconfig /flushdns

 在浏览器中输入http://a-local.test.com, 你将会看到你本地运行的代码界面

成功解决跨域问题

发起请求：

	const baseUrl="http://a-local.test.com:8888";
    $.ajax({
			method:'get',
			url:baseUrl+'/getList',
			success:(res)=>{
				console.log("请求1得到的数据");
				console.log(res);
			}
		})

		$.ajax({
			method:'get',
			url:baseUrl+'/api/getList',
			success:(res)=>{
				console.log("请求2得到的数据");
				console.log(res);
			}
		})

如图请求成功

附加：

nginx常见命令

• 帮助命令：nginx -h

• 启动Nginx服务器 ：start nginx

• 配置文件路径：/usr/local/nginx/conf/nginx.conf

• 检查配置文件：nginx -t

• 停止服务：nginx -s stop

• 退出服务（处理完所有请求后再停止服务）：nginx -s quit

• 重新加载配置文件：nginx -s reload

• 显示版本信息并退出  nginx -v 

• 杀死所有nginx进程  killall nginx