How vue-cli makes cross-domain requests
This time I will show you how vue-cli makes cross-domain requests. What are the precautions for vue-cli to make cross-domain requests. The following is a practical case, let's take a look.
During front-end development, requests to the backendInterface often require cross-domain requests. To implement cross-domain requests with vue-cli, you only need to open config/index.js and modify the following content.
//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/api':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}At this time, enter /api/look/1 at the URL of the interface you want to request to achieve cross-domain requests.
If you open F12 at this time, you will find that the requested url is localhost:8080/api/look/1. This is actually a virtual request for data from the local, so that there will be no cross-domain problems.
Under normal circumstances, there is no problem with the above method. If the above method does not work, you can try writing like this:
//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/look':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/look': '/look'
}
}
}
}
}At this time, enter / at the url of the interface you want to request. Look/1 can implement cross-domain requests.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS dynamically manipulates HTML tags
##Use JS to manipulate input text box content
The above is the detailed content of How vue-cli makes cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to make cross-domain requests in Vue?
Jun 10, 2023 pm 10:30 PM
Vue is a popular JavaScript framework for building modern web applications. When developing applications using Vue, you often need to interact with different APIs, which are often located on different servers. Due to cross-domain security policy restrictions, when a Vue application is running on one domain name, it cannot communicate directly with the API on another domain name. This article will introduce several methods for making cross-domain requests in Vue. 1. Use a proxy A common cross-domain solution is to use a proxy
How to use context to implement request retry strategy in Go
Jul 21, 2023 pm 04:39 PM
How to use context to implement request retry strategy in Go Introduction: When building a distributed system, network requests will inevitably encounter some failures. In order to ensure the reliability and stability of the system, we usually use a retry strategy to handle these failed requests to increase the success rate of the request. In the Go language, we can use the context package to implement the request retry strategy. This article will introduce how to use the context package in Go to implement a request retry strategy, with code examples. 1. What is
How Nginx implements request rewrite configuration based on request URL
Nov 08, 2023 pm 04:15 PM
Nginx is a lightweight, high-performance web server that not only supports advanced functions such as reverse proxy and load balancing, but also has powerful request rewriting capabilities. In actual web applications, in many cases the request URL needs to be rewritten to achieve better user experience and search engine optimization effects. This article will introduce how Nginx implements request rewriting configuration based on the request URL, including specific code examples. Rewrite syntax In Nginx, you can use the rewrite directive to perform request rewriting. its basic language
Common application scenarios of the Head request method in Laravel
Mar 06, 2024 pm 09:33 PM
Common application scenarios of the Head request method in Laravel In Laravel, the HEAD method in the HTTP request method is usually used to obtain the metadata of the resource without obtaining the actual content. The HEAD request is similar to the GET request, but does not return the actual response body content, only the response header information. This makes the HEAD request very useful in some specific scenarios. The following are some common application scenarios and corresponding code examples. Verify the validity of the link using the HEAD request method can be used to verify the chain
How to use Hyperf framework for request retries
Oct 24, 2023 am 09:37 AM
How to use the Hyperf framework for request retry. With the unpredictability of network communication, we often encounter request failures in application development. In order to ensure the stability and robustness of the application, we can increase the success rate of requests through the request retry mechanism. In the Hyperf framework, we can use the Retry component provided by Hyperf to implement the request retry function. This article will introduce in detail how to use the Retry component in the Hyperf framework and give specific code examples. First, we need to
How to use context to implement request idempotence in Go
Jul 21, 2023 pm 12:37 PM
How to use context to implement request idempotence in Go Introduction In web development, idempotence is a very important concept. It ensures that multiple executions of a request do not have inconsistent side effects on the system. When dealing with concurrent requests or when the network is unstable, using idempotence can ensure the security and reliability of requests. The context package in Go provides a mechanism to handle this situation. What is idempotence? Simply put, idempotence refers to the result of multiple executions of the same operation being the same as the result of one execution.
Vue-cli3.0 scaffolding to create Vue project steps and process
Jun 09, 2023 pm 04:08 PM
Vue-cli3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations. Below we will introduce step by step the steps and process of creating a project using Vue-cli3.0. To install Vue-cli3.0, you first need to install Vue-cli3.0 globally. You can install it through npm: npminstall-g@vue/cli
The use of Vue-cli scaffolding and its plug-in recommendations
Jun 09, 2023 pm 04:11 PM
Vue-cli is a scaffolding tool officially provided by Vue.js to build Vue projects. By using Vue-cli, you can quickly build the basic skeleton of a Vue project, allowing developers to focus on the implementation of business logic without spending a lot of time. To configure the basic environment of the project. This article will introduce the basic usage of Vue-cli and commonly used plug-in recommendations, aiming to provide a guide to the use of Vue-cli for beginners. 1. Basic usage of Vue-cli Install Vue-cli
