跨域是什么？有哪些解决跨域的方法和方案？

​

什么是跨域?

所谓的同源是指，域名、协议、端口均为相同。

所谓的跨域，不同的域名、协议、端口皆为不同域

一个域与另一个域名、协议或者端口不同的域的之间访问都叫跨域

解决跨域的方法和方案：

1：通过服务端代理请求。如PHP，服务端语言php是没有跨域限制的，让服务器去别的网站获取内容然后返回给页面。

2：第二种：jsonp跨域

    1. jsonp跨域就是利用script标签的跨域能力请求资源

    2. jsonp与ajax没有半毛钱关系！！

    3. 浏览器的同源策略限制了js的跨域能力，但没有限制link img iframe script 的跨域行为

    实现方式：

    1. 利用js创建一个script标签，把json的url赋给script的scr属性，

    2. 把这个script插入到页面里，让浏览器去跨域获取资源

    3. JS先声明好回调函数，插入页面后会代为执行该函数，并且传入json对象为其参数。

    注意：

    1. jsonp只针对get请求

    2. script标签加载回来的资源会被当成js在全局执行

3：CORS 跨域资源共享(xhr2)

    CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

    它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

    整个CORS通信过程，都是浏览器自动完成，不需要用户参与

    对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样

    实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信

4：nginx代理跨域

    通过nginx服务器转发跨域请求，达到跨域的目的

--------------------------------------------

5：在vue项目中，可以在vue.config.js中使用proxy配置node服务代理，因为nodejs没有同源策略。所以支持跨域

module.exports = defineConfig({

  transpileDependencies:ture,

devServer:{

  port:8000,

  //配置解决跨域问题，配置成功后重启项目

  proxy：{

    //匹配路径 就是地址栏后面第一个字段

    '第一个字段'：{

      target：'https://xxx' //这里是远程服务器地址，

      changeOrigin:true  //允许改变源

    }

  }

}

})

设置之后记得把axios请求baseurl 的请求地址改成本地 localhost地址

​