First, what is cross-domain

The browser has the same origin policy. Therefore, non-same origin scripts cannot be accessed, that is, they cannot be accessed across domain names.

So in order to achieve cross-domain, there are many solutions to the front and back end, here we will solve the cross-domain problem of VUE under Webpack.

2. ProxyTable needs to be configured for cross-domain vUE in Webpack

1. Add ProxyTable

Js -> module.exports -> dev in vue project

proxyTable: {
  '/visit':{target: process.env.API_ROOT, // Interface domain name changeOrigin:truePathRewrite: {// proxy: if the proxy is enabled, a virtual server will be created locally, and then the server will send the requested data and receive the requested data at the same time. In this way, the data interaction between the server and server will not have the cross-domain problem'^/visit':'/visit'  //https://XX.XX.XX/visit/
    //'^/api': '/api'   //http://XX.XX.XX.XX:8083/api/login
    //'^/api': '/'      //http://XX.XX.XX.XX:8083/login
    }
  }
},
Copy the code

2. Configure IP addresses based on the development and production environments

The development environment

Exports: config -> dev.env.js -> module.exports: API_ROOT

The production environment

Exports: config -> prod.env.js -> module.exports: API_ROOT

After the configuration is complete, you need to compile it again

3. Interface access

1. Add the interface address to api.js

import { get, post } from '.. /request/http';
const api={
  getScreenList:'/getScreenList'// Interface name}export default api
export const getScreenList = params => get(api.getScreenList, params);
Copy the code

2. Use promise to access the interface

import { getScreenList} from '@/request/api';

export default {
    mounted(){
      console.log('test -)
      this.getScreenList();
    },
    methods:{
      async getScreenList() {let params={};
        await getScreenList(params).then(res => {
          console.log('Access successful'); }})}},Copy the code