在 Vue 中使用 Axios Api 發布數據

Question

我嘗試使用這些代碼在 Vue 中使用 Axios Api 發布數據，但出現以下錯誤：

CORS 策略已阻止從源“null”訪問“ https://jsonplaceholder.typicode.com/todos ”處的 XMLHttpRequest：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 16_Axios_API_CRUD.html:96 錯誤：XMLHttpRequest.l.onerror (spread.js:25) 的 e.exports (spread.js:25) 網絡錯誤

 new Vue({ el: "#app", data() { return { todos: [], newTodo: "", loading: true, errored: false }; }, methods: { addToDo() { debugger; const _todo = { title: this.newTodo, completed: false }; //const { title } = this.newTodo; axios .post("https://jsonplaceholder.typicode.com/todos", _todo) .then(res => (this.todos = [...this.todos, res.data])) } }, mounted() { axios .get("https://jsonplaceholder.typicode.com/todos?_limit=5") .then(response => (this.todos = response.data)) } });

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script> <div id="app"> <input v-model.trim="newTodo" /> <input value="Add" type="button" v-on:click="addToDo" /> <section v-else> <div v-bind:key="todo.id" v-for="todo in todos"> <div class="todo-item" v-bind:class="{'is-complete':todo.completed}"> <p> {{todo.title}} </p> </div> </div> </section> </div>

以前有人遇到過這個錯誤信息嗎？ 在發布之前，我是否需要在某些教程中注意到的析構函數？ 不太確定為什么有些教程有析構函數。

編輯：它看起來像“處理緩慢”的問題。 我可以在很長一段時間后發布數據。 如何添加一些“動畫”以表明它實際上正在發布數據並正在返回數據？

Answer 1

您正在使用絕對 URL。 有兩種方法可以處理這個問題。

• 配置您的服務器以處理 CORS 標頭
• 使用 webpack-dev-server 或 nginx 等工具配置本地反向代理。

如果您選擇第二個，這是推薦的，您的代碼將是這樣的：

axios
          .post("/api/todos", _todo)
          .then(res => (this.todos = [...this.todos, res.data]))

在您的反向代理中，由 webpack-dev-server 實現：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'https://jsonplaceholder.typicode.com'
    },
    secure: true
  }
};

更多關於這個：

• https://www.freecodecamp.org/news/never-use-an-absolute-path-for-your-apis-again-9ee9199563be/
• https://webpack.js.org/configuration/dev-server/#devserverproxy