前端跨域 web前端程序员，面试必备9种跨域产生原因和解决方案，附资料

前言

前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。

一、什么是跨域？

1.什么是同源策略及其限制内容？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

上述代码经过两次跨域，值得注意的是浏览器向代理服务器发送请求，也遵循同源策略，最后在 index.html 文件打印出{"title":"fontend","password":"123456"}

6.nginx 反向代理

实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过 nginx 配置一个代理服务器做跳板机，反向代理访问 domain2 接口，并且可以顺便修改 cookie 中 domain 信息，方便当前域 cookie 写入，实现跨域登录。

先下载nginx，然后将 nginx 目录下的 nginx.conf 修改如下:

// proxy服务器server { listen 80; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名 index index.html index.htm; # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为* add_header Access-Control-Allow-Credentials true; }}

最后通过命令行nginx -s reload启动 nginx

// index.htmlvar xhr = new XMLHttpRequest;// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open;xhr.send;// server.jsvar http = require;var server = http.createServer;var qs = require;server.on { var params = qs.parse); // 向前台写cookie res.writeHead; res.write); res.end;});server.listen;console.log;

7.window.name + iframe

window.name 属性的独特之处：name 值在不同的页面加载后依旧存在，并且可以支持非常长的 name 值。

其中 a.html 和 b.html 是同域的，都是http://localhost:3000;而 c.html 是http://localhost:4000

// a.html

Ajax

AngularJS

前端构建工具

React

Vue

8年开发老码农福利赠送：如果你对前端开发这门技术感兴趣，我自己整理的一份2019年最新前端学习资料，从最基础的HTML+CSS到各种框架和项目实战的资料都有整理，送给每一位学习前端的小伙伴。

关注小编回复‘学习’，领取资料