First, cross-domain fixed error reporting format

Whenever a cross-domain problem occurs, the browser displays a fixed format error message

Access to XMLHttpRequest at 'server URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ii. Why cross-domain is reported?

Do not meet the same Origin policy: Protocol + domain name + port is a security policy adopted by the browser to protect the interface from access

  1. Cognate definition: The protocol of the two urls is the same as that of the host and port

    Protocol: HTTP, HTTPS host: domain name or IP address (127.0.01) port :3000,4399

    Definition of different sources: Two URLS, and neither protocol host port is the same

2. What is cross-domain?

  • [When the browser uses Ajax, if the interface address requested is different from the current open page address, the source is called cross-domain]

    • (1) Ajax: the browser only uses Ajax to send requests across domains. Href and SRC attributes do not cross domains –
    • (2) Interface address: URL of ajax request
    • (3) Open page: window.location.href of the current page
    • (4) Different sources: The browser uses Ajax to send requests to the interfaces of different sources, which is called cross-domain access

3. How to solve cross-domain problems?

In the VUE project, mainly aimed atCORSorProxyThese two scenarios unfold

1. The first type :CORS [backend]

  • The most popular and simplest solution is to let the backend set the response header and allow resource sharing
// Call method to create a server const app = express() // Parse jSON-formatted request body app.use(express.json()) // parse query string format fun App.use (Exoress.urlencoded ({extended:true})) // First: app.use(Exoress.urlencoded ({extended:true})) Use ((req.res.next)=>{// Set the response header to tell the browser that any address can access the interface Res.setheader (' access-cosntro-allow-origin ','*') // tell the browser to support these methods Res.setheader (' access-cosntro-allow-methods ','GET,POST,DELETE,PUT') next()}) const cors = require('cors')  app.use(cors())Copy the code

Displayed after the setting is successful

2. The second type :JSONP [front-end + back-end]

  • It used to be popular for all kinds of cross-domain problems
  • The front and back ends need to work together
  • How it works: Making requests via script tag SRC has no cross-domain restrictions on retrieving resources
  • Note: JSONP only supports GET requests, not POST, and the returned items are executed as JS

3. The third type :Nginx

4. The fourth kind :Proxy [front-end solution: only applicable to the local development environment, online understanding will never, directly put DIST in the back-end server]

  • Produces cross-domain:

    • Request sent, [browser blocked]
    • Server and server sending requests do not exist across domains
    • Project startup lets the server request

Vue-cli scaffolding tool building project

In the vue.config.js configuration file

Module. exports = {devServer: {proxy: {// if the request address starts with/API, it will trigger the proxy mechanism '/ API ': {target: 'http://localhost:3000' / / agents to the true interface address / / http://localhost:9588/api/login - > http://localhost:3000/api/login}}}}}Copy the code

Configure the root path by sending a request through AXIOS

axios.defaults.baseURL='/api'
Copy the code

After modifying the configuration, restart the front-end project for cross-domain resolution

Lay special emphasis on:

The ajax base address, baseUrl, must be a relative address, not an absolute one