vue 在做basic auth验证时遇到的跨域问题

Vue中解决Basic Auth跨域认证问题

最新推荐文章于 2024-05-30 17:10:41 发布

原创

最新推荐文章于 2024-05-30 17:10:41 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue项目中，使用Basic Auth进行身份验证时遇到了401错误及CORS问题。虽然Springboot + Security + Auth2.0通常支持跨域，但此情况不适用。通过在`config/index.js`的proxyTable配置解决跨域，同时在请求时需注意Content-Type应为'application/x-www-form-urlencoded'，避免JSON格式导致的问题。起初误用jQuery的$.param序列化，移除jQuery后需正确序列化请求参数，否则grant_type会丢失，引发错误。

之前做了一套angular与springboot + secrity +auth2.0的验证授权，在angular中

     $http({
            method: 'POST',
            url: 'localhost:8080/oauth/token',
            data: $.param({
                username: xxxxxxxxx,
                password: xxxxxxxxxxx,
                grant_type: 'password'
    }),
            headers :{
                "Content-Type" : 'application/x-www-form-urlencoded',
                "Authorization" : 'Basic XXXXXXXXXXXXXXX'
            }
        }).then(function successCallback(response) {
            // 请求成功执行代码
            localStorageService.set('id_token', response.data.access_token);
        }, function errorCallback(response) {
            // 请求失败执行代码
            notify.closeAll();
            notify({message: '登陆失败!请输入正确的用户名和密码'});
        });

直接就可以得到token，并放到localstorage中，但在vue中

        let headers = {
          headers:
            {
              'Content-Type': 'application/x-www-form-urlencoded',

最低0.47元/天解锁文章