跨域问题

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

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

同源策略,是浏览器对 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 需要后端配合返回指定格式的数据。
  1. 去创建一个script标签
  2. script的src属性设置接口地址
  3. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
  4. 通过定义函数名去接受返回的数据
• 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 400 /error/400.html;
            error_page 403 /error/403.html;
            error_page 404 /error/404.html;
            error_page 500 /error/500.html;
            error_page 501 /error/501.html;
            error_page 502 /error/502.html;
            error_page 503 /error/503.html;
            error_page 504 /error/504.html;
            error_page 505 /error/505.html;
            error_page 506 /error/506.html;
            error_page 507 /error/507.html;
            error_page 509 /error/509.html;
            error_page 510 /error/510.html;
            include D:/wgj/nginx.htaccess;
            autoindex  off;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
	location /api/ {
            proxy_pass http://localhost:8000;
        }
}