这是一个很简单的方案,通过启用Apache反向代理解决js跨域问题。
其实有一个更简单的方法,如果你使用Chrome浏览器,你可以装一个叫Allow-Control-Allow-Origin: *的拓展程序,跨域问题就直接解决啦!但是,这个方法有一个问题,前端跨域POST请求的时候,因为CORS(cross origin resource share)规范的存在,浏览器会首先发送一次OPTIONS嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送POST请求。也就是说,如果之前开发的api没有考虑OPTIONS方法的话,OPTIONS嗅探就会失败,那么跨域POST请求也会跟着失败!如果你刚好遇上了这种情况,可以使用Apache反向代理的方法完美解决js跨域问题。
为什么要这么做?
在现在的开发过程中大家会遇到这样一个问题:后端代码写好之后,前端需要将后端代码部署到本地才能正常使用api。若直接使用远程服务器上的api(例如测试服务器上的api)就会出现js跨域问题,导致远程服务器上的api无法使用。但是,将后端代码部署到前端的本地会出现以下几个问题:
为了简单高效的开发,建议前端启用Apache反向代理解决js跨域问题。在解决js跨域问题之后,前端可直接使用测试服务器上的api接口,不需要再在本地部署后端代码。这样前端和后端都只需要在关心自己的代码就可以了。
正向代理和反向代理
这里有一篇非常好的文章做了详细解释:正向代理与反向代理有什么区别。我在这里还是简单概述一下:
正向代理:正向代理隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求,知名的科学上网工具shadowsocks 扮演的就是典型的正向代理角色。在天朝用浏览器访问 www.google.com 时,被残忍的拒绝了,于是你可以在国外搭建一台代理服务器,让代理帮我去请求 google.com,代理把请求返回的相应结构再返回给我。
反向代理:反向代理隐藏了真实的服务端,当我们请求 www.baidu.com 的时候,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。
准备
在本地安装好apache服务器!
怎么做?
启用proxy模块
Windows环境一般是安装了xampp或者wamp。在xampp或者wamp安装目录下,修改httpd.conf配置文件,去掉以下两行前面 # 号,从而启用Apache proxy module。
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
Ubuntu:
sudo apt-get install libapache2-mod-proxy-html
sudo apt-get install libxml2-dev
sudo a2enmod proxy proxy_http
在httpd-vhosts.conf里配置virtualHost实现反向代理:
<VirtualHost *:80>
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
#ProxyPassReverse /project http://ip_address/project
ProxyPass /project http://ip_address/project
</VirtualHost>
重启Apache
如何解决web浏览器跨域问题——利用反向代理nginx/apache/nodejs
一般而言,如果后端域名和前端没有部署在同一台机器上,在web端进行网络请求就会出现跨域问题,导致无法调试。
一般的remote开发都会遇到这个问题,这里可以使用jsonp解决这个问题,但是却需要后台进行一些其他的操作,也不适合这套api同时共享给移动端,那么如何在web端进行远程调试,一般我们可以使用反向代理解决这个问题。当然,代理是会使得请求速度变慢的,大概十几-上百ms,所以在线上环境上,可以根据实际业务需求来考量是否使用反向代理这个方式。
然后,反向代理基本所有的server都可以做到,本篇文章就写一下常见的nginx、apache和nodejs的反向代理方法。
nginx:
在server的配置里加入类似于下文的
location /api/ {
proxy_pass http://suibo.5dktv.com/api/;
proxy_redirect default ;
}
apache:
找到配置文件httpd.conf
<VirtualHost *:80>
ServerAdmin admin@example.com
ServerName localhost:80
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass /api http://suibo.5dktv.com/api
ProxyPassReverse /api http://suibo.5dktv.com/api
</VirtualHost>
nodejs:
nodejs的话,如果是用express的话,需要安装express-http-proxy这个模块,用npm安装就好了
安装完成后,
var proxy = require('express-http-proxy');
var app = require('express')();
app.use('/proxy', proxy('www.google.com', {
forwardPath: function(req, res) {
return require('url').parse(req.url).path;
}
}));
类似于这样既可。
三种方法都是可以的,具体用哪种就看对哪种服务器熟悉了。。
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题。
一般来说可以用来做:静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等,而且实现这一切,基本只需要改改那万能的配置文件即可。
之前的博文记录了作为负载均衡。这里先记录一下作为静态页面的服务器和反向代理跨域的使用。
结合之前 《angularjs+webapi2 跨域Basic 认证授权》的案例,对跨域的方式进行改造一下。
一.静态页面服务器
nginx.conf 的配置(其实默认的也是如此,所以作为静态服务器只需要将静态文件移动到nginx下的html文件夹里就可以了)
server {
listen 8094; #监听端口
server_name localhost; #
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;#文件根目录
index index.html index.htm;#默认起始页
}
}
然后打开浏览器 输入 localhost:8094 即可
就是这么简单
二.反向代理服务器-》跨域
之前我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持。但有些浏览器是不支持的,所以这并非是最佳方案
现在我们来利用nginx 通过反向代理 满足浏览器的同源策略实现跨域
首先,我先注释掉之前的跨域设置
然后访问一下index1.html
提示了跨域问题
然后我们回到nginx.conf 配置一个反向代理路径(新增红色部分)
server {
listen 8094;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://localhost:1894;
}
}
配置说明:配置一个/apis 重写到我们真正的api地址http://localhost:1894 形成一个代理的过程。
然后更改一下index1.html的api请求地址
这样这个api的地址就跟当前页面index1.html处于同源位置了。就是我们配置的nginx监听地址 localhost:8094
然后我们再次在浏览器中访问 index1.html 可能请求到的知识缓存页面 请清除缓存或重启nginx
没有了跨域问题。 这里因为我之前登陆过 并记录了 token 所以没有提示登录
小结:写得不是很细,当作笔记,如伤过客,诚挚抱歉。
转载于:https://segmentfault.com/a/1190000007352990
https://blog.csdn.net/xiedong9857/article/details/55518311
https://www.cnblogs.com/bninp/p/5694277.html