前言
在开发静态页面时,类似vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。
最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。不过这种方式开发PC页面到还好,如果是移动端页面就不行了。
解决办法
使用Nginx转发请求。把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址。
举个栗子
例如我们在开发一个Vue应用。
原先:
调试页面是:http://192.168.1.100:8080/
请求的接口是:http://ni.hao.sao/api/get/info
步骤一:
请求的接口是:http://192.168.1.100:8080/api/get/info
PS:这样就解决了跨域问题。
步骤二:
安装好Nginx后,去到/usr/local/etc/nginx/目录(这是Mac的),修改nginx.conf文件。
步骤三:
把默认的server配置注释掉。
在下面增加:
server{
listen 8888;
server_name 192.168.1.100;
location /{
proxy_pass http://192.168.1.100:8080;
}
location /api{
proxy_pass http://ni.hao.sao/api;
}
}
保存后,启动Nginx。
PS:并不需要太了解Nginx的配置,很简单的。
步骤四:
访问:http://192.168.1.100:8888/
搞定。
PS:注意访问的端口是‘8888’,有其他域的地址继续加location就行了。
错误示范
我一开始不太懂Nginx的配置,以为可以如下配置。
server{
listen 8080;
server_name 192.168.1.100;
location /api{
proxy_pass http://ni.hao.sao/api;
}
}
之所以这么写,是我认为这样可以让Nginx帮我监听8080的请求,然后只转发匹配的请求。我没有意识到的是Nginx这么写后,是需要占用8080端口的。
既然需要占用端口,那也就不能再被其他相同协议的进程占用,就导致开发的页面无法以8080端口启用。经同事提点,才想起这事情,换下思路,就有了最上面的方法。
总结
其实不仅是在开发调试时候能这么干,在生产环境也能这么玩。利用Nginx转发请求之后,就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。
本文地址 :http://www.cnblogs.com/lovesong/p/10269793.html
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问
JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求
web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。
CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败
原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签,地址赋值给标签的src。
Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下,这样你通过axios 或fetche访问 /api/** 便相当于跨域访问了
跨域,前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax,使用CORS机制。以下阐述一下AngularJS中使用$http实现跨域请求数据。指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数。JSON_CALLBACK必须全为大写。
在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头
由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。同源策略:是指协议,域名,端口都要相同
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!