Discuss the issue of cross-domain access to one or more domain names in react axios

[Related article recommendations: ajax video tutorial]

1.react axios cross-domain access to a domain name

The configuration is very simple, you only need to configure it in the current package.json file:

"proxy":"http://iot-demo-web- dev.autel.com", //Of course, here is a fake address

like this:

The cross-domain is completed, Of course, you can also add a few more pieces of code like on the Internet, like this:

I don’t know what will happen if you write this code. Anyway, I will report an error. I can't show you the specific error message here because my project has already been run npm run eject This command

The error message probably means that proxy hopes to get a string, but now What I get is an object, so I can only use the method of the first picture for cross-domain

Then we install axios. Of course, other things are also possible. Create an api file in the src directory project, and then Create a user.js in the api file and write the following code

import axios from 'axios'

export function _user(data) {
 return axios.get('device/detail', data)
}

The cross-domain I use here is the kind of cross-domain shown in the first picture

When you need to send a request Write the following code in the place:

import { _user } from '../api/user'

 componentDidMount() {
 let res = _user({})
 console.log(res)
 }

Then we can happily obtain the data given to us by the background

The above kind of cross-domain can be said to be very convenient, but , what if the backend gives us two or even three different domain names? Then we have to use plug-ins

2.react axios to access multiple domain names across domains

Install the plug-in: npm install --save http-proxy-middleware

After installation, we start the configuration:

1. First, temporarily run the command to expose the configuration

npm run eject
or
yarn eject

Here you may encounter an error:

At this time, you can Baidu the error report, Or follow me and continue.

The reason for the error is because when we use scaffolding to build react, the system will automatically add a .gitignore file to us. If you have not submitted it to the warehouse, you need to submit it first. Warehouse

After completing these two steps, you can continue to name npm run eject . After the configuration file is exposed, your package.json There may be many configurations, let’s not worry about it. Create a setupProxy.js under src and write the following code in it:

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
 createProxyMiddleware('/api', {
  target: 'http://iot-demo-web-server-dev.autel.com',
  changeOrigin: true,
 })
 )
 app.use(
 '/sys',
  createProxyMiddleware({
  target: 'http://localhost:5001',
  changeOrigin: true,
 })
 );
}

Find the scripts path and open strat.js

Negotiate the following code around line 117:

require('../src/setupProxy')(devServer) //注意路径是否正，是你刚才建的那个文件

So many cross-domains will be successful. It is worth noting that you need to Add api or sys in front of the specific path like this

Related learning recommendations: js video tutorial

The above is the detailed content of Discuss the issue of cross-domain access to one or more domain names in react axios. For more information, please follow other related articles on the PHP Chinese website!