Nginx 的使用配置并利用nginx 反向代理解决跨域问题

Nginx的下载地址:http://nginx.org/en/download.html

选择适合自己系统的版本下载

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第1张图片

下载完成解压安装包。并点击nginx.exe 开启nginx ( 会一闪之后就消失,是正常的,已经开启服务了 ) ;

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第2张图片

在浏览器中输入http://localhost/ 会看到启动成功页面:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第3张图片

####修改Nginx对应的项目路径

  1. 找到nginx包中的conf -> nginx.conf 文件

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第4张图片

  1. 修改http ->server ->location中的 root

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第5张图片

  1. 前端写完代码之后进行打包,在项目中生成dist文件夹,浏览器路径为:http://localhost/dist/index.html#/ , 即可查看打包后的index.html页面

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第6张图片

浏览器中:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第7张图片

####利用nginx 反向代理本地解决跨域问题

  1. 在nginx.conf文件中配置一个反向代理路径;

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第8张图片

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第9张图片

  1. 在ajax请求中更改请求路径url:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第10张图片

请求地址对比:

原请求地址 url:https://bond.jikeyun.net/index.php/interfaces/info/contact ;

更改之后 url: http://localhost/bond/index.php/interfaces/info/contact ;

在浏览器:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第11张图片

补充:

上面是用ajax请求接口,这里使用dva创建的项目中自带的fetch请求接口:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第12张图片

浏览器中:

Nginx 的使用配置并利用nginx 反向代理解决跨域问题_第13张图片
3. 项目中引用jssdk时,nginx配置跨域之后使用sdk时报签名错误

原因:使用sdk时访问的不是https://su.bcebos.com/而是本地域名,所以会报签名错误,把请求地址重写,当遇到 "/v1/ " 字段时会自动替换成 “ https://su.bcebos.com/ ”

location /v1/ {
		rewrite ^/v1/(.*)$ /$1 break;
        proxy_pass https://su.bcebos.com/;
 }

你可能感兴趣的:(前端工具安装使用)