前端开发用nginx代理服务器解决服务器跨域问题及跨域访问https访问(mac系统下)

前端开发经常遇到一些服务器由于跨域造成访问不了的情况。以前BS模式,前后端都是一个人开发,跨域问题造成的开发阻碍不是很明显,但是现在前端框架欣欣向荣,很多时候变成了CS模式的开发,但浏览器天生的跨域限制,造成了开发,特别是对单独的前端开发人员(不太懂后台开发的人)造成一定开发障碍。还好有nodejs及其一系列前端自动化工具很好的解决了开发时的问题。但今天我要说的用nginx代理来解决这个问题。我觉得很简单!
以下都是基于mac系统的操作!
先看没有代理时,随便访问网上一个接口, http://web.juhe.cn:8080/finance/exchange/rmbquot

$.get(‘http://web.juhe.cn:8080/finance/exchange/rmbquot‘,function(data){
	$(‘#app‘).html(data);
})

会发现浏览器下面,

1.安装nginx服务器,可以看我的这篇博客http://www.cnblogs.com/fengnovo/p/6230013.html

2.修改下 /usr/local/etc/nginx/nginx.conf 文件,将

server {}  包起来那段修改为以下的
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

server {
        listen 8000;

        location /api {
            proxy_pass http://web.juhe.cn:8080/finance/exchange/rmbquot;      } }

上面三句是设置服务器端允许请求的客户端跨域,
下面几句话是将监听本机(localhost)8000端口,将8000端口/api请求转发到 http://web.juhe.cn:8080/finance/exchange/rmbquot

3.然后启动nginx服务器

4.再修改自己的代码,将http://web.juhe.cn:8080/finance/exchange/rmbquot改为指向自己nginx服务器http://localhost:8000/api

$.get(‘http://localhost:8000/api‘,function(data){
	$(‘#app‘).html(data);})

5.这时再访问,就可以将服务器返回的数据打印出来不会再出现No ‘Access-Control-Allow-Origin‘ header is present报错

6.对于https的请求也是一样代理,将 proxy_pass http://web.juhe.cn:8080/finance/exchange/rmbquot; 改为 proxy_pass https://xxx.com;

时间: 2024-10-14 16:48:31

前端开发用nginx代理服务器解决服务器跨域问题及跨域访问https访问(mac系统下)的相关文章

前端开发掌握nginx常用功能之server&location匹配规则

nginx主要是公司运维同学必须掌握的知识,涉及到反向代理.负载均衡等服务器配置.前端开发尤其是纯前端开发来说对nginx接触的并不多,但是在一些情况下,nginx还是需要前端自己来搞:例如我们公司的开发环境和测试环境,虽然qa可以帮助搞定配置,但是每新增一个前端模块或者模块nginx配置经常变更都求着qa搞,麻烦别人还不如自己来搞,这样更能理解自己的需求.这些都需要前端开发对nginx有所理解,下面我们来说说nginx最基础的server和location匹配规则. 1. server匹配规则

mac系统下(os x 10)手动设置IP提示无效服务器IP的解决方法

在mac系统下(os x 10),手动设置ip地址后,弹出错误提示"无效的服务器地址 " 解决的办法是:  ~ networksetup -listallnetworkservices  列出所有网络服务信息  ~ networksetup -setv6off "Ethernet"   停止对应网卡的ipV6服务                                    ~ networksetup -setmanual "Ethernet&q

计算机图形学-mac系统下Xcode中OpenGL开发环境配置。

mac系统下Xcode中OpenGL开发环境配置. 这学期有计算机图形学的课程,需要用到OpenGL,最近着手开始配置开发环境了,老师上课给的安装包都是基于windows系统的.网上也是windows上配置的教程比较多,Mac版的比较少.我综合了几个教程并自己总结,实践成功.特来分享配置过程.希望能帮到大家! 介绍 OpenGL(Open Graphics Library)是定义了一个跨编程语言,跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维亦可),是一个功能强大,与硬件无关,调

mac系统下为emacs设置中文字体,解决乱码问题

最近换了个系统,现在用mac系统. 当打开emacs后,中文支持的不是很好.有的地方能显示,在.el文件的注释里显示为口口口口口口口口这样的框,如下图所示 找了半天,是因为中文字体的问题,只要设置好中文字体就行了. 以前在Linux下中文就支持的很好,不用配制中文字体就能显示. 配制代码如下(将其放到.emacs文件或init.el里就OK): ;; -------------------------------------------------------------------------

Mac系统下 解决ThinkPHP生成目录,无法保存问题

Mac环境下我们建立目录的时候往往要增加目录的时候要修改权限,输入密码,大大的降低了效率. 解决办法: 1.找到你的目录站点 终端打开打 2.终端输入find file -exec sudo chmod 777 {} \;  既可以解决  例子: PHP项目:PHPTest 路径    /Users/MuyunLee/PHPWorkSpace/PHPTest/ 终端执行 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; col

前端开发掌握nginx常用功能之rewrite

上一篇博文对nginx最常用功能的server及location的匹配规则进行了讲解,这也是nginx实现控制访问和反向代理的基础.掌握请求的匹配规则算是对nginx有了入门,但是这些往往还是不能满足实际的需求场景,例如请求url重写.重定向等等,这都需要对请求的path进行修改操作的,匹配规则是不能独自完成实际需求的,这就需要掌握nginx的另一个常用功能rewrite,下面就来说说这个常用功能. Rewrite规则 rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正

android下前端开发诡异bug记录&解决方法

1.border-radius有bug,围不住background 描述:设置了border-radius后,背景色依然会从圆角里冒出来 解决方法:在设置了border-radius的容器加上background-clip:padding-box;一定要把background样式提到background-clip样式前!!(被这个bug坑死了,花了大半天时间在近乎绝望的情况下找出了原因) 不断补充中…

mac系统下用nginx服务器部署页面

1.安装nginx(需要先安装Homebrew).使用命令 brew install nginx 安装nginx. 2.用命令 open /usr/local/Cellar/nginx 用访达打开安装路径. 3.打开bin文件夹,双击nginx文件,启动nginx,然后访问http://localhost:8080/. 出现如图界面,则启动nginx成功. 4.打开配置文件.用命令 open /usr/local/etc/nginx 打开配置文件所在路径,再用文本编辑器打开nginx.conf文

Mac系统下的php扩展开发

通常在开发PHP的时候,一些核心代码,比如加密函数或需要高效率执行的代码,此时可以用C语言写扩展.本文主要介绍了扩展的开发流程,具体的代码实现参考生成的文件说明. 当前PHP使用的是XAMPP 5.6.8,安装路径是:/Applications/XAMPP/. 1. 开始之前,从网站上下载php 5.6.8的扩展,下载地址:http://php.net/get/php-5.6.8.tar.bz2/from/a/mirror 2. 解压后进入ext目录,执行:./ext_skel --extnam