为什么跨域？

因为浏览器的安全机制 同源策略( 同端口 同协议 同域名 )

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)
      })
    }