Vue cross-domain problem solving: Access to XMLHttpRequest at'httplocalhost

I encountered a cross-domain problem two days ago and reported the error of Access to XMLHttpRequest at'httplocalhost. I found some information on the Internet. I realized it by configuring vue.config.js and proxy. It feels very convenient and I will share it with you!

1. Background supplement (jsonp)

First of all, let's have a background, why does cross-domain appear? --(Let’s learn about another kind of jsonp first, I don’t use this method, but how to say, such as interviews, it’s always good to know more about several methods, jsonp won’t post the specific method, because I didn’t have it this time try)

Because the browser has the same-origin policy (Supplement: the same protocol, domain name, and port are the same origin,
the same-origin policy restrictions:
1. JS scripts cannot access cookies and localstorage under another domain
2. Cannot operate another domain dom
3. Ajax Cross-domain requests are not allowed
, that is, resource interaction from different sources is restricted, and cross-domain access is not allowed, but js from different domains can be introduced into a page, but it can be accessed freely, such as the img tag, based on this principle, jsonp appears. jsonp
and json have nothing to do, json It is a data exchange format, and jsonp is an unofficial data transmission protocol.
How to implement it, the front-end passes the callback parameter, and the back-end uses the value of this parameter as the function name to wrap the json data, so that the front-end is the js code.

Second, the practice of solving cross-domain methods (Based on the packaged axios, non-native)
1. Find the vue.config.js file in the root directory of the vue project (if there is no such file, create it yourself), set the cross-domain in the proxy, and set the address to be accessed in the proxy , and rewrite /api to an empty string.

vue.config.js

// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。
module.exports = {
  devServer:{
    proxy:{
      '/api':{//表示拦截以/api开头的请求路径
        target:'http://（这里填你项目真实的后端地址）',
        changOrigin: true,//是否开启跨域
        pathRewrite:{
          '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }
  }
}

That is, configure vue.config.js as shown in the figure above.

2. When axios.create, set baseURL to api, two simple steps, and it's done.

http.js（封装axios的那个文件）

import axios from 'axios'
var http=axios.create({
    baseURL:'api',//把原来的项目地址，改成api，解决跨域问题
    timeout:3000
})

I just solved my cross-domain problem through the above two steps, and I hope to give you a reference.

Let me add the principle:

1. Why do you want to rewrite the api to become a null character?

Because if it is configured like ours, the actual path we request will bring api, but we don’t need api when we initiate the request, so we need to change it to a null character.

2. The principle of using proxy for cross-domain in vue is:

Send the domain name to the local server (start the service of the vue project, loclahost:8080), and then the local server will request the real server.