什么是跨域？

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

说到这里，大家肯定会好奇，那么什么是同源策略呢？

所谓同源就是指：域名，协议，端口均相同

http://www.123.com/index.html 调用 http://www.123.com/server.js(非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.js(域名不同，所以跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.js(子域名不同，所以也是跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.js(端口不同，所以也是跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.js(因为协议不同，所以也跨域了)

注意：localhost 和 127.0.0.1 虽然都指向本机，但是也是属于跨域

跨域的三种解决方案

- JSONP

由于同源策略只对 js 代码进行限制，所以，我们可以通过其他的方式来绕过同源策略的限制，从而来发送请求。

最后发现浏览器只对 ajax 请求有同源请求限制，而对 script 标签 src 属性、link 标签 href 属性和 img 标签 src 属性没有这种限制。因此就有了一种解决跨域的方法，以下介绍了两种方式中的 jsonp 来解决跨域：

1. 使用原生 js 来书写 JSONP解决跨域问题

这里主要是创建了一个 script 标签，并且设置它的 src 属性为我们所要请求的服务器地址，然后将这个 scritp 标签添加到页面中，这样就完成了一次请求的发送。值得提出的是：在服务器端返回的数据要以 js 代码的形式返回。

let script = document.createElement('script');
script.setAttribute('src','http://127.0.0.1:3000');
document.getElementsByTagName('head')[0].appendChild(script);
document.getElementsByTagName('head')[0].removeChild(script);

注意：上面的最后一行代码，是因为你发送了一次请求它就会添加一条 script 标签，在实际项目中，请求的次数肯定不止一次，所以如果不删除，就会有很多条 scritp 标签，导致代码冗余。

2. jQuery 中使用JSONP来解决跨域

主要思路：在请求地址后面添加一个 ?callback=?，将 ajax 方法中的 dataType 设置为 jsonp，最后服务器会接收一个由 jquery自动生成 callback 函数，将要返回的数据放在这个函数中。

$.ajax({url : 'http://127.0.0.1:3000/stu?callback=?',dataType:'jsonp',success : function(data){console.log(data);}})

- CORS

CORS 方法可以说是解决 ajax 跨域方案中最为优雅的，最为简单的方法

实际上，跨域的请求会正常发送到服务器，服务器也会正常接收到请求并且也会正常的返回响应，那为什么还会出现跨域呢？那就是因为浏览器的同源策略，导致浏览器不会将返回的数据交给 js 来执行。

// 创建一个中间件，这个中间件的作用是允许跨域
const allowCorssDomain = function(req,res,next){// 我们在这个中间件里面主要是设置响应头res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header('Access-Control-Allow-Credentials','true');next();
}app.use(allowCorssDomain);

CORS 方法其实很简单，只需要在响应头里面添加一些键值对即可，如以上代码

- 搭建代理服务器

总的来说导致跨域的问题就是因为浏览器的安全策略的限制，但是如果是服务器向服务器发送请求，就不会有这样的安全限制了

所以，就有了代理服务器这么一说，可以先让 ajax 请求同源的代理服务器，再由代理服务器向目标服务器发送请求，这样就圆满的解决了跨域的问题

具体操作如下：

首先我们需要再创建一个服务器。
代理服务器可以使用express proxy-server来创建的。

接下来需要对代理服务器进行一个配置，需要安装一个中间件

npm i http-proxy-middleware

具体配置如下：

// 对中间件进行一个配置
const options = {target : 'http://127.0.0.1:3000',  // 目标服务器的地址changeOrigin : true , // 是否可以改写 urlpathRewrite : {// 定义你的改写规则'^/api' : '/'}
}

接下来对这个中间件进行注册

// url 以api开头的，要用 proxy 这个中间来进行处理
app.use('/api',proxy.createProxyMiddleware(options));

最后，在客户端发送请求的时候，就要在前面添加 api ，如下：

 $.ajax({url : '/api/stu', // 添加 api 这个前缀，代表该请求要转发type : 'get',success : function(data){console.log(data);}})

跨域的这三种解决方案你知道吗？相关推荐

跨域请求的三种解决方案
跨域的三种解决方案一.同源策略二.jsonp 三.cors 四.proxy 一.同源策略 xhr对象无法跨域请求文件.通俗讲就是"浏览器"给js发送请求的限制,你只能给自己域名 ...
前端跨域问题的几种解决方案
前端跨域问题的几种解决方案参考文章: (1)前端跨域问题的几种解决方案 (2)https://www.cnblogs.com/xinxingyu/p/6075881.html 备忘一下.
跨域的另一种解决方案——CORS（Cross-Origin Resource Sharing）跨域资源共享
跨域的另一种解决方案--CORS(Cross-Origin Resource Sharing)跨域资源共享参考文章: (1)跨域的另一种解决方案--CORS(Cross-Origin Resourc ...
AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
跨域问题的4种解决方案
更多内容,请访问我的个人博客. 前言难以置信,我居然被跨域问题折磨了一上午.相信很多程序员都遇到过跨域问题,当然,解决方案也有很多种.但我今天尝试了无数种办法,依旧没有解决.直到最后我媳妇儿给了我 ...
js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径
什么是同源?什么是跨域? 客户端向服务器发送请求的时候,如果协议,域名(IP)和端口都一样,则称为同源,但凡有一个不一样则跨域,跨域请求默认受到浏览器的安全策略的限制,浏览器会给出相应的错误信息,对于 ...
跨域问题的几种解决方案汇总
来源:github.com/campcc/blog 什么是"跨源" JSONP CORS 兼容性实现原理请求类型 PostMessage Websocket Nginx 反向代 ...
跨域解决的三种方法、四种请求方式
同源: 同源:ajax请求的url和网页所在的url具有相同的协议,域名,ip和端口同源策略:为了数据安全,浏览器禁止通过ajax请求读取非同源的数据(注意:同源策略的两个关键点:1,浏览器 2,a ...

跨域的这三种解决方案你知道吗？

文章目录