解决跨域问题

1、 跨域问题的解决

跨域问题 ： 浏览器有同源策略,(相同域名,相同的端口,相同协议),如果不是同源,存在跨域问题

(1)jsonp
​ 动态的构造的 标签

缺陷:
​ 只接受get请求/需要服务支持

(2)通过nginx (部署) – 解决跨域问题 – 反向代理机制

把访问后台的请求转换访问自己, 让那个nginx去访问后台,把结果值再转给前台

缺点:

​ 需要部署服务,做配置

(3) CORS机制: 跨域资源共享"(Cross-origin resource sharing) "

​ 解决跨域问题

​ 发送请求:
1、普通请求 ：发送一次,后台服务需要运行访问 …
2、特殊请求 发送二次, 第一次是预检请求, 服务器也要运行预检,发现
预检通过,在发送真实请求 , 真实请求也需要服务器允许

​ 解决:都需要服务允许
​ 注解: 版本 spring版本 4.2.5 以后才支持注解

配置：在controller中加上@CrossOrigin注解，注意spring版本必须是4.2.5以上才可以使用
注意：配置的时候如果spring版本在4.2.5以下需要下载4.2.5版本以上的

<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <!-- spring版本号 -->
        <spring.version>4.2.5.RELEASE</spring.version>
        <!-- mybatis版本号 -->
        <mybatis.version>3.2.1</mybatis.version>
        <!-- log4j日志文件管理包版本 -->
        <slf4j.version>1.7.2</slf4j.version>
        <log4j.version>1.2.17</log4j.version>
        <!-- jackson包版本 -->
        <jackson.version>2.5.0</jackson.version>
        <!--swagger版本-->
        <springfox.version>2.4.0</springfox.version>
    </properties>

2、完成前后端restfull风格的crud

后端，也就是controller

/*新增数据*/
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public void save(@RequestBody Department department){
         departmentService.save(department);
    }
    /*删除数据*/
    @RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable Long id){
        departmentService.remove(id);
        return new AjaxResult();
    }
    /*修改数据*/
    @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Department department){
        departmentService.update(department);
        return new AjaxResult();
    }
    /*查询一条数据*/
    @RequestMapping(value = "/{id}",method = RequestMethod.GET)
    @ResponseBody
    public Department queryOne(@PathVariable Long id){
        return departmentService.queryOne(id);
    }
    /*查询所有数据*/
    @RequestMapping(value = "/list", method = RequestMethod.PATCH)
    @ResponseBody
    public List<Department> list(){
        return departmentService.queryAll();
    }

前端

//需要先在main.js中引入
import axios from ‘axios’
//配置axios的全局基本路径
axios.defaults.baseURL=‘http://localhost/’
//全局属性配置，在任意组件内可以使用 this.$http获取axios对象
Vue.prototype.$http = axios

<!--新增-->
addSubmit: function () {
	this.$refs.addForm.validate((valid) => {
		if (valid) {
			this.$confirm('确认提交吗？', '提示', {}).then(() => {
				this.addLoading = true;
				//para 当前对象
				let para = Object.assign({}, this.addForm);
				console.debug(para);
				//addUser(para).then((res) => {
				
                this.$http.put('/department',para).then(res=>{
				this.addLoading = false;
				this.$message({
					message: '提交成功',
					type: 'success'
				});
				this.$refs['addForm'].resetFields();
				this.addFormVisible = false;
				this.getDepartment();
				});
			});
		}
	});
}

删除

//删除
handleDel: function (index, row) {
	this.$confirm('确认删除该记录吗?', '提示', {
		type: 'warning'
	}).then(() => {
		this.listLoading = true;
		//removeUser(para).then((res) => {
                 this.$http.delete('/department/'+row.id).then(res=>{
			this.listLoading = false;
			this.$message({
				message: '删除成功',
				type: 'success'
			});
			this.getDepartment();
		});
	}).catch(() => {

	});
}

修改

//修改
editSubmit: function () {
	this.$refs.editForm.validate((valid) => {
		if (valid) {
			this.$confirm('确认提交吗？', '提示', {}).then(() => {
				this.editLoading = true;
				//NProgress.start();
                         //para 修改之后的数据
				let para = Object.assign({}, this.editForm);
				console.debug(para);
				//editUser(para).then((res) => {
                         this.$http.post('/department',para).then(res=>{
					this.editLoading = false;
					//NProgress.done();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.$refs['editForm'].resetFields();
					this.editFormVisible = false;
					this.getDepartment();
				});
			});
		}
	});
}

查询

//查询所有部门列表
getDepartment() {
	this.listLoading = true;
	//getUserListPage(para).then((res) => {
             this.$http.patch('/department/list').then(res=>{
		//this.total = res.data.total;
		this.departments = res.data;
		this.listLoading = false;
	});
}