CORS实现请求跨域
-
CORS: 全称"跨域资源共享"（Cross-origin resource sharing）
-
CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。
CORS的作用
- 调用XMLHttpRequest或fetchAPI通过跨站点方式访问资源
- 网络字体，例如Bootstrap（通过CSS使用@font-face 跨域调用字体）
- 通过canvas标签，绘制图表和视频。
1.什么是跨域？
-
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
-
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
2.跨域访问示例
假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http://localhost:82 即本地ip端口82上。
现在A网站的页面想去访问B网站的信息，A网站页面的代码如下（这里使用jquery的异步请求）
$(function (){
$.get("http://localhost:82/api/values", {},function (result) {
$("#show").html(result);
})})；
3.如何解决跨域问题？
首先我们用nginx作为代理服务器和用户交互，这样用户就只需要在80端口上进行交互就可以了，这样就避免了跨域问题，因为我们都是在80端口上进行交互的；
server {
listen 80; #监听80端口，可以改成其他端口
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;
}
1.当用户发送localhost:80/时会被nginx转发到http://localhost:81服务；
2.当界面请求接口数据时，只要以/apis 为开头，就会被nginx转发到后端接口服务器上；
总结：nginx实现跨域的原理，实际就是把web项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正干活的服务器）；
