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 /;#}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小技巧】