1. The use of axios to read JSON data
Installation command: npm install axios --save
Create a new http folder in the src directory, and create a new index.ts file
![](https://img-blog.csdnimg.cn/img_convert/a014dc8652861fa3c8f51553f337b9bd.png)
Just import the method in http in the component that needs to be used
![](https://img-blog.csdnimg.cn/img_convert/d77e39442741014d4d05889737c4404f.png)
Bind JSON data to the carousel
![](https://img-blog.csdnimg.cn/img_convert/4f949bbfeebfb4250f5eddbe30548b81.png)
2. Webapi creation-operation-and directory explanation for back-end development
Use vs2022 to create a webapi
Select.NET6.0
Choose Create with Controller
Select OpenApl
5. Create a directory
![](https://img-blog.csdnimg.cn/img_convert/25b9688cb4925e94cd01235a51263de0.png)
3. Webapi routing settings, and use swagger to view and debug interfaces
Create a new Image controller
![](https://img-blog.csdnimg.cn/img_convert/8934bf43717ce574f5c1815a3efbc265.png)
Modify the default route
![](https://img-blog.csdnimg.cn/img_convert/a86201e4c32099b018f820df1b034da5.png)
Add method to get image list
ImageUrl="Add the address of the picture inside", CourseUrl="Add the address of the page jump inside"
![](https://img-blog.csdnimg.cn/img_convert/cd18bd3156101a9a0d5189c548816327.png)
View and debug with Swagger
Debugging by adding breakpoints
![](https://img-blog.csdnimg.cn/img_convert/a457fd603d3783505f20d34e0840b0e9.png)
Then run in the foreground
![](https://img-blog.csdnimg.cn/img_convert/f18db531eb1eae0abbc113a7f4f623e5.png)
Then this screen appears
![](https://img-blog.csdnimg.cn/img_convert/99ad3707cd7cd23c8f089c650713218c.png)
Then test step by step
![](https://img-blog.csdnimg.cn/img_convert/e0c66a965eb2b95c4a10c5f2c47784ca.png)
3. Axios read webapi cross-domain problem analysis
Phenomenon: You can see that the webapi interface can be directly accessed through swagger or browser and returned, but when using axios, the browser reports an error.
Reason: The reason for the above phenomenon is that the browser is for javascript
4. Solving cross-domain problems
The backend solves the cross-domain problem (the solution backend sets the interface to allow cross-domain)
Add code in Program.cs (main function)
![](https://img-blog.csdnimg.cn/img_convert/a15e968e6b4d7a868a084b7e2cd2df44.png)
//Add cross-domain policy
builder.Services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().WithExposedHeaders("X-Pagination"));
});
//Use cross domain policy
app.UseCors("CorsPolicy");
Front-end solves cross-domain problems
The front end keeps the port consistent with the back end by setting a proxy
Add the following code under the vue.config.js file
![](https://img-blog.csdnimg.cn/img_convert/d1a90c4b78b1caabc0aa0361adfd98b0.png)
Then restart the front-end project