1. 程式人生 > 實用技巧 >vue基礎,同源策略以及跨域

vue基礎,同源策略以及跨域

跨域基礎

跨域:
    1、是什麼
        你的目標和你自己現在的位置一樣還是不一樣

        瀏覽器上的同源策略

        特點:
        1、跨域只存在於瀏覽器
        2、不在瀏覽器發請求是不會存在跨域問題的
        3、http請求分為兩大類: 普通http請求(如百度請求)和ajax請求(跨域是出現在ajax請求)
          
    2、在什麼地方    
        瀏覽器會跨域 伺服器不會
 
    3、什麼條件會跨域   
        同源(協議  ip  埠一致)不跨域  
        不同源就跨域(三個中間有一個不一樣就跨域)
        
    
        http://localhost:8080/     -------  》 github    (有得是後臺解決了允許跨域,前端如何解決跨域)

    4、解決跨域:前端可以解決、後端解決。一般後端解決比前端解決容易

1.如果埠9000的服務向埠8000的埠傳送請求,這一定跨域了,此時我們需要在在webpack配置檔案中devserer中配置Proxy代理

  async searchAjax(q) {
      try {
        const result = await axios({
          url: "http://localhost:9000/api/users/info",
          method: "get"
        });
        console.log(result.data);
      } catch (error) {
        console.log(error);
      }

在webpack配置檔案中devserer中配置Proxy代理

   //3. 增加 devServer 配置
   devServer: {
    open: true,     // 自動開啟瀏覽器
    compress: true, // 啟動gzip壓縮
    port: 9000,     // 埠號
    quiet:true,
    // proxy:{
    //   // 請求路徑 http://localhost:9000/api/users/info
    //   //api會把http://localhost:9000覆蓋掉
    //   // 代理轉發路徑 http://localhost:8000/api/users/info

    //   // "/api":{
    //   //   target :"http://localhost:8000",  //目標路徑
    //   //   pathRewrite: {"^/api" : ""},  //代理會把身份標識去掉替換成空竄
    //   //   changeOrigin:true
    //   // },
// } },