First refer to a friend online: blog.csdn.net/yunfeng482/…

When the following problems occur

If the browser reports the following error, the request is cross-domain. localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight Request doesn't pass access control check: No 'access-Control-allow-origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, Set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Copy the code

Why this is cross-domain: Scripts that are not same-origin cannot operate on objects under other sources because of the browser’s same-origin policy.

What is the Same Origin policy? As a convention, the Same Origin policy is the core and basic security function of a browser. If the Same origin policy is absent, normal browser functions may be affected. The Web is built on the same origin policy, and browsers are just an implementation of the same origin policy. In simple terms, if the protocol, IP address, and port are the same, it is the same source

There are many cross-domain solutions, such as Script tags, JSONP, back-end Settings cros, and so on… But what I’m talking about here is webPack configuring VUE’s proxyTable solution across domains.

PathRewrite Simply put, pathRewrite redirects the request path to match the correct request address when using a proxy.

dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://XX.XX.XX.XX:8083', changeOrigin: true, pathRewrite: { '^/api': '/ API / / / / this interface configuration out http://XX.XX.XX.XX:8083/api/login' ^ / API ':'/' the interface configuration out http://XX.XX.XX.XX:8083/login}}}},Copy the code

How to forward the pathRewrite request to XX.xx.xx.xx :8083 without configuring the URI. For example, localhost:8080/ API/XXX will be forwarded to xx.xx.xx. XX:8083/ API/XXX

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

$this.$ajaxGet ({url: '/ API /getPermission', data: {}, isLayer: true, successFc: data => { console.log(data.data) } })Copy the code

Two data request methods: fecth and axios

1. Fetch mode:

For a page that needs a request, just write (/apis+ specific request parameters) as follows:

fetch("/apis/test/testToken.php", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
        token: "f4c902c9ae5a2a9d8f84868ad064e706"
      },
      body: JSON.stringify(data)
    })
      .then(res => res.json())
      .then(data => {
        console.log(data);
      });
Copy the code

2. Axios method:

The main js code

import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false Vue. Prototype. $axios = axios / / will axios mounted on the Vue instance prototype / / set axios request token axios.defaults.headers.com mon = [' token '] 'f4c902c9ae5a2a9d8f84868ad064e706 / / set the request header axios. Defaults. Headers. Post [] "the content-type" = "application/json"Copy the code

Axios requests the page code


this.$axios.post('/apis/test/testToken.php',data).then(res=>{
        console.log(res)
})
Copy the code

The original link: blog.csdn.net/yunfeng482/…

Q: what does’ ^/iclient ‘:’ mean in proxyTable pathRewrite?

A: To use a proxy, you first have to have a sign telling him that you want to use a proxy for the connection. Otherwise, your static HTML, CSS, and JS resources might be proxies. So we just use proxy for the interface and local for static files.

'/iclient': {}“Is to tellnodeAs long as it is'/iclient'We only use proxies at the beginning. So you have to write your interface like this/iclient/xx/xx.Finally, the proxy path ishttp://xxx.xx.com/iclient/xx/xx.

But no, my correct interface path is not in/iclientAh, so you need topathRewritewith''^/iclient'':'','/iclient'Remove it so that it has the correct identity and can be removed when the interface is requestediclient.

proxyTable: {
      '/api':{
        target:'http://localhost:8083',
        // secure:true,
        changeOrigin:true,
        pathRewrite:{
          "^/api":""
        }
      }
    }

Copy the code

1. To understand pathRewrite, first understand the function of ‘/ API’ under proxyTable.

To use a proxy, you first need to have a logo that identifies which connections need to use the proxy, and only those connections that have the logo should use the proxy.” / API “indicates that interfaces that start with”/API “are used as proxies. Therefore, write request interfaces in the form of”/API /xx/xx “(displayed in the browser address bar). Use the proxy request path is generated after the ‘http://localhost:8083/api/xx/xx’ (this is the real background request address)

2. The function of “^/ API” :” in pathRewrite

If there is no “/ API” in the actual requested path. You need pathRewrite, use ‘^/ API’ : ‘, remove ‘/ API’, so that it has the correct identifier and the correct path to request.