什么是跨域？前后端解决跨域的方法，web前端开发学习方法

② jQuery ajax：

$.ajax({

url: ‘http://www.test.com:8080/login’,

type: ‘get’,

dataType: ‘jsonp’, // 请求方式为jsonp

jsonpCallback: “handleCallback”, // 自定义回调函数名

data: {}

});

③ Vue.js

this.$http.jsonp(‘http://www.domain2.com:8080/login’, {

params: {},

jsonp: ‘handleCallback’

}).then((res) => {

console.log(res);

})

【4】CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

【前端设置】根据xhr.withCredentials字段判断是否带有cookie

①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie

xhr.withCredentials = true;

xhr.open(‘post’, ‘http://www.domain2.com:8080/login’, true);

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

xhr.send(‘user=admin’);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

② jQuery ajax

$.ajax({

url: ‘http://www.test.com:8080/login’,

type: ‘get’,

data: {},

xhrFields: {

withCredentials: true // 前端设置是否带cookie

},

crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie

});

③vue-resource

Vue.http.options.credentials = true

④ axios

axios.defaults.withCredentials = true

【服务端设置】

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

① Java后台

/*

• 导入包：import javax.servlet.http.HttpServletResponse;

• 接口参数中定义：HttpServletResponse response

*/

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加’/’

response.setHeader(“Access-Control-Allow-Origin”, “http://www.domain1.com”);

// 允许前端带认证cookie：启用此项后，上面的域名不能为’*'，必须指定具体的域名，否则浏览器会提示

response.setHeader(“Access-Control-Allow-Credentials”, “true”);

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头

response.setHeader(“Access-Control-Allow-Headers”, “Content-Type,X-Requested-With”);

② Nodejs后台

var http = require(‘http’);

var server = http.createServer();

var qs = require(‘querystring’);

server.on(‘request’, function(req, res) {

var postData = ‘’;

// 数据块接收中

req.addListener(‘data’, function(chunk) {

postData += chunk;

});

// 数据接收完毕

req.addListener(‘end’, function() {

postData = qs.parse(postData);

// 跨域后台设置

res.writeHead(200, {

‘Access-Control-Allow-Credentials’: ‘true’, // 后端允许发送Cookie

‘Access-Control-Allow-Origin’: ‘http://www.domain1.com’, // 允许访问的域（协议+域名+端口）

/*

• 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，

• 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问

*/

‘Set-Cookie’: ‘l=a123456;Path=/;Domain=www.domain2.com;HttpOnly’ // HttpOnly的作用是让js无法读取cookie

});

res.write(JSON.stringify(postData));

res.end();

});

});

server.listen(‘8080’);

console.log(‘Server is running at port 8080…’);

③ PHP后台

<?php header("Access-Control-Allow-Origin:*"); []( )五、前端如何解决 --------------------------------------------------------------------------- []( )**5.1 动态创建script** ------------------------------------------------------------------------------------- function loadScript(url, func) { var head = document.head || document.getElementByTagName('head')[0]; var script = document.createElement('script'); script.src = url; script.onload = script.onreadystatechange = function(){ if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){ func(); script.onload = script.onreadystatechange = null; } }; head.insertBefore(script, 0); } window.baidu = { sug: function(data){ console.log(data); } } loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')}); //我们请求的内容在哪里？ //我们可以在chorme调试面板的source中看到script引入的内容 []( )**5.2 CORS** ------------------------------------------------------------------------------- **CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。** IE中对CORS的实现是xdr var xdr = new XDomainRequest(); xdr.onload = function(){ console.log(xdr.responseText); } xdr.open('get', 'http://www.baidu.com'); ...... xdr.send(null); **其它浏览器中的实现就在xhr中** var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){ console.log(xhr.responseText); } } } xhr.open('get', 'http://www.baidu.com'); ...... xhr.send(null); **实现跨浏览器的CORS** function createCORS(method, url){ var xhr = new XMLHttpRequest(); if('withCredentials' in xhr){ xhr.open(method, url, true); }else if(typeof XDomainRequest != 'undefined'){ var xhr = new XDomainRequest(); xhr.open(method, url); }else{ xhr = null; } return xhr; } **自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。** **深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！** **因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**   **既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**  **由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！** **如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）** ### 结尾 学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。 [**资料领取方式：戳这里免费获取**](https://bbs.csdn.net/topics/618191877) 涵盖了95%以上前端开发知识点，真正体系化！** [外链图片转存中...(img-httBkOzg-1712275604929)] **由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！** **如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）** ### 结尾 学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。 [**资料领取方式：戳这里免费获取**](https://bbs.csdn.net/topics/618191877)