跨域解决方案

使用proxy解决跨域问题

问题引入

前端如果不通过proxy设置代理，则请求接口会报跨域问题
Access to XMLHttpRequest at 'https://www.baidu.com/s?ie=utf+-+8&mod=1&isbd=1&isid=28B087E526051712&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=this.$axios&fenlei=256&oq=this.%2524axios&rsv_pq=af3009be00003a79&rsv_t=1c5fWtMk%2B6xwWKQqibPt6DyyGzLEaQSdASvH93Q6UDEXyZdfGTnRxojuNms&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=t&bs=this.$axios&_ss=1&clist=&hsug=&f4s=1&csor=' from origin 'http://172.16.20.231:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

1.在vue.config.ts中进行配置

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
    
  proxy: {
    
      '/cdn': {
    
          target: 'https://position.csdnimg.cn',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{
    
              '^/cdn': '/'
          }
      }
  }
}

2.在具体页面发送请求

假设要请求的后端地址为’https://position.csdnimg.cn/oapi/get’

//使用axios进行请求,首先在main.ts中将axios挂载到vue原型中
import axios from 'axios'
Vue.prototype.$service = axios

//在具体页面中使用this.$axios进行请求,原生未进行封装

      this.$axios({
    
        method: "get",
        //上面的proxy会将url地址解析为https://position.csdnimg.cn/oapi/get
        url: "/cdn/oapi/get",
        params: {
    
          // 这里是发送给后台的数据
        },
      }).then((response) => {
    
        // 这里使用了ES6的语法
        console.log(response); // 请求成功返回的数据
      });

3.某些条件下可能需要对地址进行替换

var  url = "https://position.csdnimg.cn/oapi/get"
var reg = /^http(s)?:\/\/(.*?)\//
// 必须是http开头或者https开头，结尾为'/'
// 把host替换成指定数值
var ToReplace = 'cdn/'
url.replace(reg, ToReplace)
// Host/cench
//******************************************* 
如果只需要取出例如：position.csdnimg.cn，则通过以下方式
reg.exec(url)[2]
// www.cnblogs.com