跨域：使用MVVM模式.NET CORE WebAPI+vue

前端跨域解决方案

 

• 跨域是浏览器为了安全而做出的限制策略

• 浏览器请求必须遵循同源策略：同域名、同端口、同协议

跨域方式

• CORS跨域

• JSONP跨域

• 代理跨域

CORS跨域

• 服务端设置，前端直接调用

• 说明：后台允许前端某个站点进行访问

  安装axios插件

  导入：import axios form 'axios'

JSONP跨域

• 前端适配，后台配合

• 说明：前后台同时改造

• <script>
      mounted(){
          let url="";
          jsonp(url,{},(err,res)=>{
              let result=res;
              this.data=result;
          }
      }
  </script>
  

  　　

   

• (err,res)：回调函数

  err：错误信息

  res：返回结果值

  { }：options参数

接口代理

• 通过修改nginx服务器配置来实现

• 说明：前端修改，后台不动

  创建vue.config.js文件

• module.exports={
      devServer:{
          host:'localhost',
          port:8080,
          proxy:{
              '/api':{
                  target:'https://www.baidu.com',
                  changeOrigin:true,
                  pathRewrite:{
                      '/api':''
                  }          
              }
          }
      }
  }
  

  　　

   

  host：主机

  port：端口

  proxy：代理

  target：目标地址

  changeOrigin：是否要把主机头的更改为目标的url地址

  pathRewrite：转发地址