Access to XMLHttpRequest at ‘localhost:8080/drug/queryDrug‘ from origin ‘http://localhost:8082‘

报错信息：这个是跨域问题8082访问8080阻止了，浏览器访问服务器的时候会出现跨域问题，这是浏览器对js的一种安全限制，
也就是说浏览器页面访问其他服务器资源的时候，就会出现跨域，
同源策略明确了什么是跨域，所谓的策略就是协议、域名、端口号必须相同。

解决方案1：在Controller类上架@CrossOrigin

package com.fh.controller;


import com.h.entity.Drug;
import com.h.service.DrugService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
@RequestMapping("/drug")
@CrossOrigin
public class DrugController {
    @Autowired
    private DrugService drugService;

    //查询数据
    @RequestMapping("queryDrug")
    public List<Drug>queryDrug(){
        return drugService.queryDrug();
    }
    //新增
    @RequestMapping("addDrug")
    public void addDrug(Drug drug){
         drugService.addDrug(drug);
    }

}

解决方案2：如果还不行查看自己的请求url路径，必须加http://协议

 url:'http://localhost:8080/drug/queryDrug',

错误版：

<template>
  <div id="app">

  </div>
</template>

<script>
export default {

  name: 'App',
  created(){
    this.queryDrug();
  },
  methods:{
     queryDrug () {
    this.axios({
      method:'get',
      url:'localhost:8080/drug/queryDrug',
      data:{
      }
    }).then(function (resert) {

      console.log(resert.data);
    }).catch(function (ss) {
      console.log(ss);
    })
  }
  },



}
</script>

正确版：

<template>
  <div id="app">

  </div>
</template>

<script>
export default {

  name: 'App',
  created(){
    this.queryDrug();
  },
  methods:{
     queryDrug () {
    this.axios({
      method:'get',
      url:'http://localhost:8080/drug/queryDrug',
      data:{
      }
    }).then(function (resert) {

      console.log(resert.data);
    }).catch(function (ss) {
      console.log(ss);
    })
  }
  },



}
</script>

解决方案3：如果后端使用了接口注解，如下图：

前端发送请求的方式必须和接口注解一致，不然也会报跨域：以下正确方式
（1）查询

（2）新增

（3）修改

（4）删除

（5）批删

展示结果：