跨域之nginx本地代理

港控/mmm° 2022-03-18 01:11 364阅读 0赞

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

**一、编辑nginx.conf文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70][]

**二、看代码注释（可直接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 #重新运行

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70]: /images/20220318/223837ee1d884b5192c2a66920d5cf32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70 1]: /images/20220318/0349bae168c2451da07815a9e02cd530.png