关于#跨域#的问题,如何解决?

后端有解决跨域,前端也带了token。
问题:

img

@RestController
@RequestMapping("/api/user")
@CrossOrigin
public class EmployeesController {
    @Autowired
    private EmployeesService employeesService;
    @ApiOperation("查询全部")
    @GetMapping("all")
    public Result queryAll(){
        List<Employees> employeeList = employeesService.list();
        return Result.ok(employeeList);
    }

```javascript
request.interceptors.request.use(
  (config) => {
    config.headers["Content-Type"] = "application/json";
    if (mainStore.localuser.token) {
      config.headers["token"] = mainStore.localuser.token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

用nginx或者apache反向代理吧

可以使用nginx作为转发,把前端和后台的转发都配置到一个端口,通过url前缀进行区分

  • 文章:关于Token过期的问题 中也许有你想要的答案,请看下吧
  • 除此之外, 这篇博客: 谈谈登录注册的如何实现中的 在前端中,登录注册需要通过端口来获取数据并传递参数,并进行判断事件的执行获取得到的登录信息以及一个token值 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • token是服务端生成的一串字符串,以作客户端进行请求的一个令牌, 
      它相当于数据的id,给与数据一个唯一的标识,它的出现主要目的是解决服务器频繁请求用户姓名以及密码的问题;
      它的作用是减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

    // 请求登录接口并传递参数
      this.$ClientAPI
        .loginGetToken(obj)
        .then((res) => {
          console.log(res.data.data);
          var token = res.data.data.remember_token; //读取token
          var mobile = res.data.data.mobile;
          localStorage.setItem("mobile", mobile);
          localStorage.setItem("token", token); //保存token
          localStorage.setItem("value", "admin");
          Toast.success({
            message: "登录成功",
            position: "top",
          });
          this.$router.push("/mine"); //跳转到我的页面
        })
        .catch((err) => {
          console.log(err);
          Toast.fail({
            message: "登录失败",
            position: "top",
          });
        });