一、什么是跨域?跨域是如何产生的?
- 同源策略:
浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；
- 同源:
协议 http||https、域名和 port端口 都相同则同源，只要有一项不同就是不同源
- 跨域:
不同源就跨域
跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型
文件资源-不受同源限制
通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的
二、如何解决跨域?
1.JSONP
注意:
JSONP和json没有任何关系
JSONP需要前后台配合
1.1实现原理:（另辟蹊径、瞒天过海）
**走获取文件资源script这个方式**
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
1.2 URL设置给 script 标签
- 如果直接使用ajax的形式，提醒跨域报错；
// 1.XHR这条路：
// URL ： http://www.liulongbin.top:3006/api/jsonp
// XHR形式请求URL：被同源策略限制，不符合，浏览器报错！
// $.ajax({
// url: "http://www.liulongbin.top:3006/api/jsonp"
// });
- 走文件资源的形式
<script type="text/javascript">
// 2.文件资源
// JSONP：获取文件资源，压根不受同源策略限制；
// URL设置给 script 标签
function fn (data) {
console.log(data)
}
</script>
<!-- 前端拿到是个什么？JS文件，JS代码（变量、函数） -->
<!-- 后台要求：获取文件资源的时候，告诉后台前面函数名叫啥callback=fn -->
<!-- 后台返回：约定好：文件内容：函数执行(); -->
<!-- 给大家把前端需要数据，作为函数实参传入，无形中可以拿到数据！ -->
<!-- 疑问：直接把JS文件里面直接写成数据！实现方案为什么不直接返回数据？反而返回是一个JS代码 函数执行(数据) -->
<script type="text/javascript" src="http://www.liulongbin.top:3006/api/jsonp?callback=fn">
// 上述URL返回的内容： hello({"message":"JSONP请求测试成功","data":{}})
</script>
- 改进 ↓
<script type="text/javascript">
function nihao (data) {
console.log(data)
}
// 1.动态创建一个script标签
var script = document.createElement('script');
// 2.修改src属性
script.src = 'http://www.liulongbin.top:3006/api/jsonp?callback=nihao&uname=lisi&age=12';
// 3.把动态创建的script标签追加到head标签里面,发出请求；
var head = document.getElementsByTagName('head')[0]
head.appendChild(script);
</script>
1.2 jQuery封装JSONP
-
$.ajax() 该方法可以发送jsonp请求，但是jsonp请求本质上不是Ajax;
-
和jsonp相关的两个属性 script.src = ‘xx地址?callback=nihao&uname=lisi&age=12’;
- jsonp 属性的值为了迎合后端（后端根据该名称获取回调函数的名字）；jsonp的值决定了等号左侧的那个名字
- jsonpCallback 决定等号右侧的内容(服务端返回的函数调用的名称)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点击通过JSONP方式获取数据（JQ）</button>
</body>
<script src="./jquery.js"></script>
<script type="text/javascript">
let fn = function(data) {
console.log(data);
};
// 现在带着大家用$.ajax方式实现JSONP
$("button").click(function() {
// 好处：JQ开发来说：友好；写法统一！
// 不加ataType: 'jsonp'：背后实现使用XHR
// 加上：造script标签，设置src，添加到页面head结构；
$.ajax({
// ********************************基本写法够了
// 内部实现过程就是上节优化写；不是XHR，造script标签；
dataType: 'jsonp',
url: "http://www.liulongbin.top:3006/api/jsonp",
success: function(res) {
console.log(res);
},
// ********************************灵活配置
// 指定后面值：后台约定参数名
// jsonp: 'callback',
// 指定值：前端指定执行函数的名称
// jsonpCallback: "fn"
});
// 细节：使用$.ajax无需关注函数名叫什么，自定内部会给函数起名字；
// 默认参数名就是callback;（一般情况下所有后台默认使用callback）
// 如果后台要求使用使用cb 配置jsonp: 'cb',
// $.ajax
// *******XHR:FormData POST
// processData: false,
// contentType: false,
// *******JSONP：文件资源
// dataType: 'jsonp',
// jsonp:"后台要求参数名",
// jsonpCallback:"参数值"
});
</script>
</html>
- 特点：
- script标签发出请求本身就是get，不支持别的请求方式
- get请求传递的数据量有限制（URL地址的长度不超过8000个字符）
2. CORS（跨域资源共享）
- 一般都是后台设置
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
- 在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置（相当于将客户端添加到服务器可访问的白名单）。
//拦截所有请求 3000端口服务器
server.use((req, res, next) => {
// Access-Control-Allow-Origin 允许哪些客户端访问我
// * 代表允许所有的客户端访问我
server.header('Access-Control-Allow-Origin', '*');
// Access-Control-Allow-Methods 允许客户端使用哪些请求方法访问我
server.header('Access-Control-Allow-Methods', 'get,post');
next(); // 将控制权传递给下一中间件
});
- 在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息，如需要连cookie信息一起传递到另一服务器则需要在客户端和服务器端进行以下配置：
// 客户端
// 对ajax对象进行设置 当发送跨域请求时，携带cookie信息
xhr.withCredentials = true;
// 服务器端 3000端口服务器
// 在响应头中进行设置 允许客户端发送跨域请求时携带cookie信息
res.header('Access-Control-Allow-Credentials', true);
3.代理服务器 (这里讲述的是在vue中实现)
首先我们先来认识一下vue项目中的环境变量
- 认识环境变量-端口配置
问题：前端项目启动时，占用端口号9528，是在哪里定义的呢？
答：
在vue.config.js中配置的。下边我们来学习一下它的用法，从而了解环境变量的使用。
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环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据) |
- 在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。
- 定义环境变量-示例
key = value key表示环境变量的名称 value表示环境变量的值
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
请注意，以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，建议以它开头来定义
VUE_APP_NUM = 2000
- 使用环境变量
定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可
process.env.环境变量名
注意：修改服务的配置文件，想要生效的话，必须要重新启动服务
更多阅读：vue-cli 环境与变量
- 小结
1. 不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量
开发环境 - > development的文件 生产上线 -> production的文件
2. key = value 定义环境变量 process.env.环境变量名字
3. 自定义的环境变量要以：VUE_APP_开头
实现代理服务器
代理转发（只有浏览器会出现跨域问题，服务器与服务器之间不会出现跨域问题）
在ajax的基地在baseUrl的参数必须是相等地址，不能是绝对地址
Vue-Cli配置代理转发
思路：
在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：
1. 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。
vue-cli解决跨域配置说明
在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
//这里用了本机的服务器,所以写localhost,如果用了其他服务器把localhost换掉就好
//比如:http://192.168.156.50:3000
target: 'http://localhost:3000' // 我们要代理的真实接口地址
}
}
}
}
}
基地址
.env.development
VUE_APP_BASE_API = '/api'
api/user.js
export function login(formData) {
return request({
/ url: 'api/sys/login',
+ url: '/sys/login', // 前面的api就省略了
method: 'POST',
data: formData
})
}
小结
- vue-cli集成了跨域代理功能-- 只能用在开发阶段。
- vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。
特别强调：
ajax的基地址baseUrl必须是相对地址，而不能是绝对地址
7401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
