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小技巧】

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

nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
利用nginx 反向代理解决跨域问题
利用nginx 反向代理解决跨域问题参考文章: (1)利用nginx 反向代理解决跨域问题 (2)https://www.cnblogs.com/hpx2020/p/9928175.html 备忘一 ...
nginx反向代理解决跨域问题，使本地调试更方便
nginx反向代理解决跨域问题,使本地调试更方便参考文章: (1)nginx反向代理解决跨域问题,使本地调试更方便 (2)https://www.cnblogs.com/gwf93/p/102951 ...
Nginx 反向代理解决跨域问题
目录前言 Nginx 反向代理常用配置 Server location proxy_pass add_header OPTIONS 请求 proxy_set_header 跨域的 cookie 传输 ...
Nginx反向代理解决跨域问题（个人学习总结）
一.理解Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并 ...
【Nginx反向代理解决跨域】
跨域写在前面当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对 ...
nginx反向代理解决跨域请求问题
1.出现跨域的表现: 项目的前端调用后台接口时候,会报错: No 'Access-Control-Allow-Origin' header is present on the requested re ...
Nginx 方向代理解决跨域问题-2
概述在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览 ...

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

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

最新文章

热门文章