為什麼跨域？

因為瀏覽器的安全機制 同源策略( 同埠 同協議 同域名 )

1.jsonp 動態建立一個script標籤

2.代理跨域

因為vue腳手架中集成了一個小的內建伺服器叫devServer 我們代理跨域就是讓這個小的內建伺服器幫助我們請求資料 這樣一來我們就繞開了瀏覽器同時也就繞開了瀏覽器的安全機制---同源策略

1.配置代理跨域在vue.config.js中的devServer中配置如下內容

module.exports={
   devServer:{
     open:true,
     proxy: {
       '/api': {
        target: 'http://www.weather.com.cn/', //對應自己的介面
        changeOrigin: true,
        ws: true,
        pathRewrite: {
         '^/api': ''
        }}
       }
​
   }
}
 

2,千萬不要忘了去修改你的請求地址

3.cors（後端解決）

工作小問題

在公司跨域誰解決？

1.在開發過程中 通常前端解決（代理跨域 上線之後就廢了）

2.上線之後肯定是後端解決

axios傳送資料

get

使用params傳送資料 params需要一個物件

import service from "@/util/service.js"
​
export function getlink(url,params){
   return new Promise((resolve)=>{
     service.request({
       url,
       method:"GET",
       // 傳送資料
       params
     }).then((ok)=>{
       resolve(ok)
     })
   })
}
 

傳送的時候

   getlink("地址",{資料}).then((ok)=>{
     console.log(ok)
   })

post

使用post傳送資料需要使用 var param=new URLSearchParams();修改傳參方法 使用param.append("uname","xixi")新增資料並且使用data傳送資料

import service from "@/util/service.js"
​
export function postlink(url,data){
   return new Promise((resolve)=>{
     service.request({
       url,
       method:"POST",
       data
     }).then((ok)=>{
       resolve(ok)
     })
   })
}
 

funb(){
    let usp=new URLSearchParams
    // usp.append("key","val")
    usp.append("posttext",this.inputvalb)
​
​
    postlink("/api/ceshi/post",usp).then((ok)=>{
     console.log(ok)
    })
   }

本文來自部落格園，作者：{Teil}}，轉載請註明原文連結：https://www.cnblogs.com/user-001/p/15632661.html