跨域

跨域就是跨域名来访问的数据

跨域原因说明示例

域名不同 www.jd.com 与 www.taobao.com

域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081

二级域名不同 item.jd.com 与 miaosha.jd.com

www.baidu.wenku.com www.baid.tieba.com

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：

www.jd.com/item

www.jd.com/goods

只要域名（ip）和端口号有一样不同，那么都是跨域

http://localhost:8080 前端系统发送Ajax取后端系统获取数据

http://localhost:80 后端系统

跨域问题

跨域问题: 浏览器针对ajax请求的时候,如果不同的服务,存在跨域

浏览器机制: 同源策略拦截跨域的访问

跨域不一定会有跨域问题。

解决跨域问题

(1) jsonp方式 --json变种

最早的解决方案，利用动态去填充script标签可以跨域的原理实现

localhost/department/list -- > <scprit src="/localhost/department/list">

缺点:

需要服务支持

只能发起GET请求

(2) nginx 反向代理

利用nginx反向代理把跨域为不跨域，支持各种请求方式

缺点:需要安装nginx才能使用

(3)方案3 -- 服务器允许cors这些请求

同源（相同协议，相同域名，相同端口）

cors: 一个w3c标准跨域资源共享"(Cross-origin resource sharing)

原理

浏览器会将ajax请求分为两类

简单请求---- 发送一次请求

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

- HEAD

- GET

- POST

（2）HTTP的头信息不超出以下几种字段：

- Accept

- Accept-Language

- Content-Language

- Last-Event-ID

- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

特殊请求（发送2次, 第1次是预检请求, 服务器也要运行预检, 前台发现预检通过,在发送真实请求）

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

服务器怎么允许这些 / get/post/delete/put/options /patch

解决方案:

(1)写一个配置类

(2)spring通过注解支持

CrossOrigin 注意: 4.2版本以后支持

前后端crud

查询

getDepartments() {
			    //分页 过滤
				let para = {
					page: this.page,
					name: this.filters.name
				};
				this.listLoading = true;

				//发送请求 到后台去查询数据
				this.$http.patch("/department/list",para).then(res=>{
					this.departments = res.data;
					this.listLoading = false;
				});

			}

新增

<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="部门名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				//清空表单
				this.addForm = {
					name: ''
				};
			}
			//新增
			addSubmit: function () {
			    //提交之前的验证工作
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
                            //addForm={name:''} 新增form表单  para = {name:''}
							let para = Object.assign({}, this.addForm);
						    //发送保存请求
						//	addUser(para).then((res) => {
                            this.$http.put("/department/save",para).then(res=>{
								this.addLoading = false;

								this.$message({
									message: '提交成功',
									type: 'success'
								});
								//重置表单
								this.$refs['addForm'].resetFields();
								//关闭新增对话框
								this.addFormVisible = false;
								this.getDepartments();
							});
						});
					}
				});
			}

修改

<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="部门名称" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

//显示编辑界面
			handleEdit: function (index, row) {
			    //弹出修改表单
				this.editFormVisible = true;
				//回显 row id name
				this.editForm = Object.assign({}, row);
			},
			editSubmit: function () {
			    //验证是否正确
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
                            console.log(this.editForm);
							let para = Object.assign({}, this.editForm);
                            this.$http.post("/department/update",para).then(res=>{
								this.editLoading = false;

								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getDepartments();
							});
						});
					}
				});
			}

删除

//删除
			handleDel: function (index, row) {

				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
				    //删除代码
					this.listLoading = true;

					//获取id值
                    this.$http.delete('/department/delete/'+row.id).then(res=>{
				//	removeUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done(); resultAjax
                        let {isSuccess,msg} = res.data;
                        if(isSuccess) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                message: msg,
                                type: 'error'
                            });
                        }
						this.getDepartments();
					});
				}).catch(() => {

				});
			}

SVN

代码管理工具版本控制工具

来源：CSDN

作者：Din35

链接：https://blog.csdn.net/ding35_99/article/details/103824726

标签

前后端分离

localhost

域名

前后端分离crud

跨域

解决跨域问题

前后端crud