ElementUI实现CRUD(修改前端页面),先后台解决跨域问题

1.前端项目使用一个Vue的流程前端

         a)定义一个vue文件vue

    b)在rout.js里面引入VUE文件,
c)在rout.js里面配置路由
{
    path: '/',
    component: Home,
    name: '组织机构管理',
    iconCls: 'el-icon-message',//图标样式class
   
children: [
        { path: '/department', component: Department, name: '部门管理' }
    ]
}

d)实现CRUDios

         1.首先在main.js注释前端人员使用的mock的引入的包,而后在main.js里面引入axios方式发送请求到后台的包,而后考模板进行改吧改吧!nginx

e)跨域问题的解决(主要Ajax请求时出现的跨域问题)axios

         1.跨域的类型跨域

a)同一个域名,不一样的端口服务器

         2.解决方式:cors

                  a)JSONP(老方法)代理

                          搭建一个服务器支持,将它放到服务器里面,只能发GET请求
                          <script/>component

b)- nginx服务,反向代理(部署nginx服务)
前台发送请求à被nginx请求拦截,nginx将请求路径转变成本身的路径,再转到后台服务器去访问

c)cors方案

         在服务器端作控制是否容许跨域,支持各类请求,可是会额外发送一个请求:Options请求

         前端发送请求,发送option请求,询问后台是否容许访问(预检),赞成访问,返回给前台,再发送一个正确的请求到后台.

    注意:不是全部的请求都要通过options请求的询问,特殊请求就必需要通过options请求去访问

         后台代码实现:1.配置corsfilter核心过滤器来放行前端的请求,2.只须要配置一个注解(@CrossOrigin)就能够解决跨域的问题了(前提Spring版本必须是4.2.5及以上).

相关文章
相关标签/搜索