跨域
什么是跨域
就是浏览器不能执行其他网站的脚本,他是由浏览器的同源策略造成,是浏览器施加的安全限制
同源是指 域名 协议 端口 均相同
跨域的解决方法 jsonp
用利用script标签 在里面进行ajax请求
<script>
$.ajax({
url: 'http://api.douban.com/v2/movie/in_theaters',
dataType: 'jsonp',
success: function (res){
//使用模板引擎进行渲染js有一个有反引号的模板引擎
$(res.subjects).each(function(i,item){
$('#movies').append(`<li><img src="${item.images.large}" alt="" />${item.title}</li>`)
})
}
})
</script>
在script标签中 指定请求的类型 dataType = ‘jsonp’
这种方式只能支持 get方式进行请求
使用Nginx 解决跨域
反向代理服务器
本地页面发起ajax请求 先转发到nginx nginx在转发给后台服务器 后台服务器返回数据给nginx nginx在返回给页面的技术 就是反向代理
在nginx.conf文件进行配置
配置如下
server {
listen 3000;
server_name localhost;//当前服务器的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
上面的这些配置的相关解释
让nginx 京听localhost的80端口 网站A 与网站B访问都是通过80端口 进行访问
我们另外特殊的配置了一个'/api'目录的访问,并且对url进行了重写 使/api的请求 都跳转到 http://localhost: 82 这个地址
rewrite ^/api/(.*)$ /$1 break;
代表重写拦截进来的请求,并且只能对域名后边以“/api”开头的起作用
/ 的请求 转发到 http://localhost:81这个地址 进行处理
既然配置了Nginx进行跨域的请求 那么 请求的地址就需写一些变化
ajax请求的地址 写成 /api 开头进行发送请求
这个的基础 是监听node服务器的运行端口 3000
一旦有发现请求就通过Nginx做相应的处理
node和nginx
node主要做一些业务的逻辑 nginx主要做一些ajax的跨域请求 处理一些静态页面 当需要请求后台资源时候 通过nginx进行转发 请求到数据在转发给前台页面
node主要处理并发的功能上 比如聊天系统 博客这一类的
也可以在nodejs中间件代理跨域
#####使用CORS跨域资源共享
cors支持所有请求
只需要在后台加上响应头允许域的请求 在悲情的Response header 加入以下配置
//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'