vue axios更改端口

Vue中使用axios进行同源跨域请求时，可以通过配置vue.config.js文件来解决跨域问题。在vue.config.js文件中，可以通过devServer属性进行配置。其中，proxy属性可以用来设置跨域请求的公共地址，并且可以配置一些其他参数来实现跨域请求。 具体的配置如下所示： ```javascript module.exports = { devServer: { host: '0.0.0.0', // 可以忽略不写 port: 8080, // 修改你打开后的端口号 open: true, // 项目启动时自动打开浏览器 proxy: { '/api': { target: 'https://api.weixin.qq.com', // 跨域请求的公共地址 ws: false, // 可以忽略不写 changeOrigin: true, // 是否开启跨域，值为true就是开启，false不开启 pathRewrite: { '^/api': '' // 注册全局路径，在请求时需要加上/api } } } } } ``` 以上配置中，将/api路径映射到https://api.weixin.qq.com，将请求中的/api替换为空字符串，以实现跨域请求。 如果在进行跨域请求时，出现了类似"Access-Control-Allow-Origin"的错误提示，这是由于目标资源的响应头中没有包含"Access-Control-Allow-Origin"字段导致的。这种情况下，需要后台在相应的接口中添加响应头，允许前端的请求来源。具体的解决方案需要与后台开发人员进行沟通协商。 以上是关于Vue中使用axios进行同源跨域请求的解决方案和可能出现的错误的解释。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue引入axios同源跨域问题](https://download.csdn.net/download/weixin_38738506/12951553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue解决axios跨域问题](https://blog.csdn.net/weixin_51958960/article/details/130268059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

好的，下面是一个简单的示例： 前端使用Vue.js和axios发送请求，后端使用Spring Boot提供RESTful API。 1. 创建一个Vue组件，例如User.vue，用于显示用户列表和添加/编辑用户。 ``` <template> <div> <h2>User List</h2> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr v-for="user in userList" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td> <button @click="editUser(user)">Edit</button> <button @click="deleteUser(user)">Delete</button> </td> </tr> </tbody> </table> <h2>{{ formTitle }}</h2> <form @submit.prevent="submitForm"> <label>Name:</label> <input type="text" v-model="user.name"> <label>Email:</label> <input type="email" v-model="user.email"> <button type="submit">{{ submitButton }}</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { userList: [], user: { id: null, name: '', email: '' }, formTitle: 'Add User', submitButton: 'Add' }; }, mounted() { this.fetchUserList(); }, methods: { fetchUserList() { axios.get('/api/users') .then(response => { this.userList = response.data; }) .catch(error => { console.log(error); }); }, submitForm() { if (this.user.id) { this.updateUser(); } else { this.createUser(); } }, createUser() { axios.post('/api/users', this.user) .then(response => { this.userList.push(response.data); this.resetForm(); }) .catch(error => { console.log(error); }); }, updateUser() { axios.put(`/api/users/${this.user.id}`, this.user) .then(response => { const index = this.userList.findIndex(u => u.id === this.user.id); this.userList.splice(index, 1, response.data); this.resetForm(); }) .catch(error => { console.log(error); }); }, deleteUser(user) { axios.delete(`/api/users/${user.id}`) .then(response => { const index = this.userList.findIndex(u => u.id === user.id); this.userList.splice(index, 1); }) .catch(error => { console.log(error); }); }, editUser(user) { this.user.id = user.id; this.user.name = user.name; this.user.email = user.email; this.formTitle = 'Edit User'; this.submitButton = 'Update'; }, resetForm() { this.user.id = null; this.user.name = ''; this.user.email = ''; this.formTitle = 'Add User'; this.submitButton = 'Add'; } } }; </script> ``` 2. 创建一个Spring Boot控制器，例如UserController，用于处理用户相关的HTTP请求。 ``` @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping public List<User> getAllUsers() { return userRepository.findAll(); } @PostMapping public User createUser(@RequestBody User user) { return userRepository.save(user); } @PutMapping("/{id}") public User updateUser(@PathVariable Long id, @RequestBody User user) { user.setId(id); return userRepository.save(user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userRepository.deleteById(id); } } ``` 3. 创建一个Spring Boot存储库，例如UserRepository，用于访问数据库。 ``` public interface UserRepository extends JpaRepository<User, Long> { } ``` 4. 创建一个Spring Boot实体，例如User，用于表示用户。 ``` @Entity @Table(name = "users") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) private String name; @Column(nullable = false) private String email; // getters and setters } ``` 5. 配置Spring Boot数据库连接和端口号，例如application.properties。 ``` spring.datasource.url=jdbc:mysql://localhost:3306/mydb spring.datasource.username=root spring.datasource.password=123456 server.port=8080 ``` 以上就是一个简单的Vue.js和Spring Boot增删改查的示例，你可以根据自己的需求进行修改和扩展。