跨域问题及解决方案

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。

💡注意：如果不是浏览器环境，是没有跨域问题的。跨域是浏览器自身的限制。

同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。

解决方案

• JSONP：

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

//动态创建 script
var script = document.createElement('script');

// 设置回调函数
function getData(data) {
    console.log(data);
}

//设置 script 的 src 属性，并设置请求地址

script.src = 'http://localhost:3000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);

JSONP 的缺点:
JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。
a. 去创建一个script标签
b. script的src属性设置接口地址
c. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
d. 通过定义函数名去接受返回的数据

• document.domain 基础域名相同 子域名不同
• window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
• CORS CORS(Cross-origin resource sharing)跨域资源共享
  服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin
  HTTP响应头之后，浏览器将会允许跨域请求
• proxy代理 目前常用方式,通过服务器设置代理 window.postMessage()
  利用h5新特性window.postMessage()

开发相关

关于最最最常见的跨域问题，一般联系后端解决。
nginx主要配置proxy_pass
如下：访问81端口的流量将会被转发至:8000\api\
从前端看来，都是81端口返回的数据，其实是8000->81

server {
        listen        81;
        server_name  localhost;
        root   "D:/wgj";
        location / {
	    try_files $uri $uri/ /index.html;
            index index.php index.html error/index.html; 
            error_page 404 /error/404.html;
            include D:/wgj/nginx.htaccess;
            autoindex  off;
        }
		location /api/ {
            proxy_pass http://localhost:8000;
        }
}