我有一个生成json的rails 5.1.6 api . 我有一个单独的Vue.js客户端,旨在使用它 .
该模型是实体 . GET请求可以正常查看db中所有实体的索引 . 但是,当我尝试POST一个新实体时,我在控制台中收到以下错误:
来自origin>'http:// localhost:8080'的'http:// localhost:3000 / entities'对XMLHttpRequest的访问已被CORS策略阻止:对预检请求的响应未通过访问控制检查:否'访问-Control- Allow-Origin'标头出现在请求的资源上 .
在rails应用程序中,我安装了rack-cors gem并在 initializers/cors.rb
中:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'localhost:3000'
resource '*',
headers: :any,
methods: %i(get post put patch delete options head)
end
end
在routes.rb中:
Rails.application.routes.draw do
# For details on the DSL...
post 'auth/login', to: 'authentication#authenticate'
post 'signup', to: 'users#create'
resources :entities do
resources :transactions
end
end
在客户端层:
src/services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000'
})
}
src/services/EntitiesService.js:
import Api from '@/services/Api'
export default {
fetchEntities () {
return Api().get('/entities')
},
addEntity (params) {
return Api().post('entities', params)
}
}
和
src/components/newEntity.vue:
<template>
<div class="entities">
<h1>Add Entity</h1>
<div class="form">
<div>
<input type="text" name="title" placeholder="TITLE" v-model="title">
</div>
<div>
<textarea rows="15" cols="15" placeholder="DESCRIPTION" v-model="description"></textarea>
</div>
<div>
<button class="app_entity_btn" @click="addEntity">Add</button>
</div>
</div>
</div>
</template>
<script>
import EntitiesService from '@/services/EntitiesService'
export default {
name: 'NewEntity',
data () {
return {
title: '',
description: ''
}
},
methods: {
async addEntity () {
await EntitiesService.addEntity({
title: this.title,
description: this.description
})
this.$router.push({ name: 'Entities' })
}
}
}
</script>
<style type="text/css">
.form input, .form textarea {
width: 500px;
padding: 10px;
border: 1px solid #e0dede;
outline: none;
font-size: 12px;
}
.form div {
margin: 20px;
}
.app_entity_btn {
background: #4d7ef7;
color: #fff;
padding: 10px 80px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
width: 520px;
border: none;
cursor: pointer;
}
</style>
这有什么不对?
1 回答
这显然是在请求中包含 Headers 后显然...
这是新请求: