跨域之nginx本地代理

前端跨域有很多种，nginx跨域也是常见配置之一，现在介绍一下如何使用nginx进行前端跨域。自己下载nginx到本地磁盘，自己直接去下载就行。附带history模式单页面路由刷新404问题。。

 

一、编辑nginx.conf文件

二、看代码注释（可直接copy，修改部分ip端口即可）

worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8888; # 本地nginx开启的端口号
        server_name  localhost; #本地nginx服务ip
		#配置访问路径
        location / {
            root   E:\vue-demo\demo\dist;  #html代理路径
            index  index.html index.htm;   #重定向到首页
			try_files $uri $uri/ /index.html;  #nginx中vue路由history模式刷新404解决方案
        }
        
    #location /{
      # root   E:\vue-demo\demo\dist;
       # index  index.html index.htm;
        #if (!-e $request_filename) {
           # rewrite ^/(.*) /index.html last;
           # break;
        #}
    #}

        # 配置后端服务接口跨域
        location /openapi {
            proxy_pass   http://192.168.10.241; # 后端接口 IP:port
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

三、运行命令

start nginx   #启动nginx

nginx -s stop #关闭nginx

nginx -s reload #重新运行

四，效果展示（数据就拿到了）