SpringBoot + Vue はクロスドメインの問題を解決します

問題の原因

ブラウザは、異なるプロトコル/ホスト/ポートを使用して他のドメインのサーバーにアクセスすることはできません。セキュリティを確保するには、同一生成元ポリシーに従う必要があります。解決策: 1.
バックエンド ソリューション/ 2. フロントエンド プロキシ アクセス

方法 1: バックエンド ソリューション

• Vue フロントエンド プロジェクトで axios リクエストを直接送信し、実際のインターフェイスをリクエストします

    selectAdmin() {
    
    
      axios.get('http://localhost:8080/selectAll').then(
          response => {
    
    
            this.tableData = response.data

          },
          error => {
    
    
            console.log('失败', error);
          }
      )
    }
  },

• SpringBoot で @CrossOrigin アノテーションを使用すると、1 つのアノテーションで解決できます

@CrossOrigin //Controller或具体的handler上加@CrossOrigin都是可以的
@RestController
public class AdminController {
    
    
    @Autowired
    private AdminManagerService adminManagerService;

    @GetMapping("/selectAll")
    public List<Admin> selectAllAdmin(){
    
    
        List<Admin> admins = adminManagerService.selectAllAdmin();
        System.out.println(admins);
        return admins;
    }
}

方法 2: フロントエンド ソリューション

• パスによるリクエスト

    selectAdmin() {
    
    
      axios.get('/api/selectAll').then(
          response => {
    
    
            this.tableData = response.data

          },
          error => {
    
    
            console.log('失败', error);
          }
      )
    }
  },

• vue.config.js でプロキシを構成する

  devServer: {
    
    
    proxy:{
    
    
      '/api':{
    
     // 匹配到以/api为开头的请求
        target:'http://localhost:8080/', //拼上目标服务器路径
        pathRewrite:{
    
    '^/api':''}, // 可以设定path重写, 去掉或保留路径上的api
        ws:true, // websocket 开启
        changeOrigin:true, // 开启跨域

      }
    }
  }

• 現時点では、バックエンドは注釈を追加せずに、返されたデータに通常どおりアクセスできます。