跨域是什么,如何解决跨域问题（跨域问题的三种解决方案）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

同源策略:

浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；

同源:

协议 http||https、域名和 port端口 都相同则同源，只要有一项不同就是不同源

跨域:

不同源就跨域

跨域请求出现错误的条件：浏览器同源策略 && 请求是ajax类型

文件资源-不受同源限制

通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的

注意:

JSONP和json没有任何关系

JSONP需要前后台配合

1.1实现原理:（另辟蹊径、瞒天过海）

讯享网

如果直接使用ajax的形式，提醒跨域报错；

走文件资源的形式

讯享网

改进 ↓

1.2 jQuery封装JSONP

$.ajax() 该方法可以发送jsonp请求，但是jsonp请求本质上不是Ajax;

讯享网
和jsonp相关的两个属性 script.src = ‘xx地址?callback=nihao&uname=lisi&age=12’;

jsonp 属性的值为了迎合后端（后端根据该名称获取回调函数的名字）；jsonp的值决定了等号左侧的那个名字

jsonpCallback 决定等号右侧的内容(服务端返回的函数调用的名称)

讯享网

特点：

script标签发出请求本身就是get，不支持别的请求方式

get请求传递的数据量有限制（URL地址的长度不超过8000个字符）

浏览器同源政策及其规避方法

跨域资源共享 CORS 详解

一般都是后台设置

在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置（相当于将客户端添加到服务器可访问的白名单）。

讯享网

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息，如需要连cookie信息一起传递到另一服务器则需要在客户端和服务器端进行以下配置：

讯享网

认识环境变量-端口配置

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址：地址

下图是开发环境服务端口的在vue.config.js中位置
在这里插入图片描述
我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量

环境变量的配置文件
在一些特殊的配置文件中定义环境变量

文件名称对应环境说明 .env.development 开发环境当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 .env.production 生产环境当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 .env.staging 模拟生产环境可以理解为production环境的镜像，尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)

在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。
定义环境变量-示例

讯享网

使用环境变量

讯享网

更多阅读：vue-cli 环境与变量

小结

实现代理服务器

代理转发（只有浏览器会出现跨域问题，服务器与服务器之间不会出现跨域问题）
在ajax的基地在baseUrl的参数必须是相等地址，不能是绝对地址

Vue-Cli配置代理转发

在这里插入图片描述

思路：

讯享网

vue-cli解决跨域配置说明

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

基地址

.env.development

讯享网

api/user.js

小结

vue-cli集成了跨域代理功能– 只能用在开发阶段。
vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

特别强调：

讯享网

跨域是什么,如何解决跨域问题（跨域问题的三种解决方案）

相关推荐