使用proxy解决跨域问题

问题引入

If the front end does not passproxy设置代理,The request interface will report a cross-domain problem
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.Send a request on a specific page

Suppose the backend address to be requested is ’https://position.csdnimg.cn/oapi/get’

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

//used in specific pagesthis.$axios进行请求,Native is not packaged

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

3.Address substitution may be required under certain conditions

var  url = "https://position.csdnimg.cn/oapi/get"
var reg = /^http(s)?:\/\/(.*?)\//
// 必须是http开头或者https开头,结尾为'/'
// 把hostreplace with the specified value
var ToReplace = 'cdn/'
url.replace(reg, ToReplace)
// Host/cench
//******************************************* 
If only need to take out eg：position.csdnimg.cn,in the following way
reg.exec(url)[2]
// www.cnblogs.com