elementui-admin 跨域并携带cookie

2 篇文章 0 订阅

1、下载完elementui-admin模板之后,找到utils文件目录下的 api.js 文件

                       

2、在创建axios实例下面添加一行代码 ,如图所示

                   

service.defaults.withCredentials = true

   添加过后,前端配置完成 。

3、修改相对应后台的跨域请求

   后端需要设置Access-Control-Allow-Origin(值为项目的前台地址,例如: http://ip),

   并且设置header('Access-Control-Allow-Credentials: true')

   后端代码奉上:

package com.cmbird.config;

import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 跨域
 * @author zyj
 * @date 2019-12-12 17:32:42
 */
@Component
public class CorsFilter implements Filter {

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        // todo 修改服务器IP 不然跨域无法获取 cookie
        response.setHeader("Access-Control-Allow-Origin", "http://ip");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vue-element-admin跨域处理可以通过以下几种方式实现: 1. 在config/index.js中配置proxyTable,将需要跨域的接口转发到本地服务器,然后在本地服务器上进行跨域处理。 2. 在后端服务器上配置跨域请求头,允许前端服务器的请求访问后端服务器的接口。 3. 使用JSONP实现跨域请求,通过script标签动态加载数据,从而绕过浏览器的同源策略。 4. 使用CORS(跨域资源共享)实现跨域请求,通过在后端服务器上设置Access-Control-Allow-Origin头部,允许前端服务器的请求访问后端服务器的接口。 以上是一些常见的vue-element-admin跨域处理方法,具体实现方式可以根据项目需求和实际情况进行选择。 ### 回答2: Vue-Element-Admin是一个基于Vue.js和element-ui组件库的后台管理框架,它可用于构建各类管理后台系统,从而让开发更加简洁、易用和高效。 跨域请求是指在不同域名或端口的情况下发起的HTTP请求,这些请求往往会被浏览器拦截,造成请求失败或跨域安全问题。因此,我们需要进行跨域处理来解决这些问题。 Vue-Element-Admin支持多种方式实现跨域处理,下面是一些常用的跨域处理方法: 1. 使用Vue.js自带的代理解决跨域问题:在vue.config.js文件中配置proxyTable字段,设置需要代理的请求url映射和目标url即可。例如: proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } 2. 在后端服务器中添加跨域代码:在后端服务器的响应头中添加Access-Control-Allow-Origin字段,设置允许跨域请求的源地址。例如: app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); 3. 使用JSONP进行跨域请求:JSONP是一种利用script标签可以跨域访问的特性进行跨域请求的技术。Vue-Element-Admin中使用JSONP实现跨域请求时,我们需要在后端服务器返回的数据中包含callback参数,并在前端代码中传入回调函数名。例如: axios.jsonp(url, { params: { callback: 'jsonpCallback' } }); function jsonpCallback(data) { // process data } 以上是一些常用的跨域处理方法,Vue-Element-Admin实现跨域请求时可以根据具体情况选择适合的方法。良好的跨域处理能够优化网站性能和用户体验,提高开发效率和代码质量,是开发过程中不可忽略的重要问题。 ### 回答3: Vue-element-admin 是一个基于 Vue.js 和 element-ui 的前端管理系统, 它的开发使用了前后端分离的架构。因此在开发中会出现跨域问题。本文将介绍 Vue-element-admin 跨域处理的方法。 首先我们需要了解一下跨域问题。跨域即浏览器从一个源网站,去请求另一个网站的资源时,会因为同源策略的限制而导致请求失败。同源策略是一种浏览器安全机制,作用是防止恶意网站窃取用户信息。那么跨域问题如何解决呢? Vue-element-admin 跨域处理有两种方法:使用代理和配置跨域请求头。 1.使用代理 Vue-element-admin 使用的是 vue-cli 构建的项目,我们可以在 vue.config.js 中配置代理。这里需要说明的是,使用代理需要安装 http-proxy-middleware 包。 具体操作步骤如下: 1)根目录下新建一个 vue.config.js 文件,以便于自由地的扩展 webpack 配置。 2)在 vue.config.js 文件中添加如下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 将 URL 前缀替换成 target 配置的地址,如请求 /api/login 就被代理到 http://localhost:8080/login 下。 ws: true, changeOrigin: true, pathRewrite: { '^/api': '/mock' // 这里是将 /api 替换成 /mock } } } } } ``` 3) 重新启动项目,访问代理地址即可访问到后端 API。 2.配置跨域请求头 另外一种方法就是在后台请求头中配置允许跨域。针对一个请求,浏览器会发起两次请求,第一次是用 OPTIONS 方法发送跨域请求,询问服务器是否允许这种跨域请求,只有得到肯定答复,第二次才真正发送请求。因此我们需要在服务器返回头中添加 Access-Control-* 这些头。 例如: ```javascript Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Content-Type, Accept, Authorization Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS ``` 只需在后台 API 中设置这些请求头,即可实现 Vue-element-admin 跨域处理。 综上所述,Vue-element-admin 跨域处理方法有两种,一种是使用代理,另一种是配置跨域请求头。具体使用哪种方法需要根据情况而定。如果是前后端分离的项目,我们建议采用代理方法;如果是类似于后台向前端提供 API 的项目,我们建议采用配置跨域请求头的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值