自定义请求头(token等)后预检请求被服务器拒绝(报跨域)的解决方法

起因:由于在自定义请求头后请求会从简单请求转变为复杂请求,(详情可以查看阮一峰先生的博客)复杂请求会提前发送一个预检请求与服务器进行沟通,大概类似于(预检请求:“我可以访问吗?”=> 服务器:“可以” =>真实请求),这里有个坑,因为无论服务器是否允许请求,options请求(预检请求)的状态码反馈都是200ok,最开始没反应过来,服务器拒绝了options请求并且报跨域,但是options请求一直都是200ok,导致一直在看真实请求的问题出在哪还有后端是不是没有配置跨域。最简单的方法是看看options请求有没有返回后端允许的请求信息,没有就是被拒绝了。

(没有在后端配置允许options请求是因为后端使用的别人封装好的框架无法更改,所以采用的这个方法)

解决方法:(一下仅为个人使用的方法,如果大佬有更好的方法欢迎分享)

配置代理,避免options请求。

在vue3中没有vue.config.js文件,在根目录下自己创建一个即可。然后再该文件中配置:

module.exports = {

  //相当于webpack-dev-server,  对本地服务器进行配置

  devServer: {

    proxy: {

      "/api": {

        target: "http://192.168.*.1**:8080",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口

        changeOrigin: true,           // 将基于名称的虚拟托管网站的选项,如果不配置,请求会报404

        ws: true,

        pathRewrite: { // '^/api'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api' 转接为 http://localhost:8081/

          "^/api": ""

        },

        logLevel: "debug"//日志打印检查 不在浏览器上查看

      }

    }

  }

}

完成代理配置后即可避免发送options请求,避免后端报错跨域。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,可以得知在使用shiro进行跨域请求时,会出现请求两次的问题。这是因为后台采用了token检验机制,前台发送请求必须将token放到request header中,而请求头中携带自定义参数,浏览器就认为请求是复杂跨域请求,所以浏览器在真正请求之前会发送一次预检请求,检测服务器是否支持真实请求进行跨域访问。 解决方案如下: 1.在后台代码中添加如下配置,允许跨域请求: ```java // 允许跨域请求 response.setHeader("Access-Control-Allow-Origin", "*"); 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,Authorization"); ``` 2.在shiro配置文件中添加如下配置,允许OPTIONS请求通过: ```xml <bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean"> <property name="securityManager" ref="securityManager"/> <property name="loginUrl" value="/login"/> <property name="successUrl" value="/index"/> <property name="unauthorizedUrl" value="/unauthorized"/> <property name="filters"> <util:map> <entry key="authc"> <bean class="org.apache.shiro.web.filter.authc.PassThruAuthenticationFilter"/> </entry> </util:map> </property> <property name="filterChainDefinitions"> <value> /login = anon /logout = logout /** = authc </value> </property> </bean> ``` 3.在前端代码中添加如下配置,允许携带自定义参数: ```javascript axios.defaults.headers.common['Authorization'] = 'Bearer ' + token; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.withCredentials = true; ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值