webstorm前端使用Nginx 反向代理解决跨域问题

1.webstorm设置端口

2.

3.

4.

5. 把项目放到nginx安装目录的html文件夹下：

6. 配置nginx.conf文件

server {
        listen       8090;  #监听端口
        server_name  localhost; #监听本地服务器

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
		#凡是请求里带 /mobile路径的请求都代理转发到https://api.xxx.xxx.vip/
		location /mobile {
			rewrite ^.+mobile/?(.*)$ /mobile/$1 break;
			#include uwsgi_params;
			proxy_pass https://api.xxx.xxx.vip/;
	    }
		
		#location / {
		#	proxy_pass https://www.baidu.com/;
		#}
		
		location  = / {
          root   html;  #D:/project/h5/sjqb-h5;  #你项目的根目录
          index  index.html index.htm;
        }
		

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

项目中的baseUrl可以省略，请求时会默认带上当前服务器地址，如下：

启动nginx服务，测试页面，发现接口请求都被代理到线上服务器，至此结束。

参考：

前端使用 Nginx 反向代理彻底解决跨域问题
WebStorm配置本地测试服务器
远程部署项目到服务器【WebStorm小技巧】