無法使用內容類型：應用程序/ json從angular到rails

所以我試圖發送POST請求與Content-Type：application/json從angular到我的rails後端。我收到以下錯誤控制檯：無法使用內容類型：應用程序/ json從angular到rails

angular.js：12578個選項http://localhost:3000/api/student_create 404（未找到）

和

的XMLHttpRequest無法加載http://localhost:3000/api/student_create。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問原產地'http://localhost:8008'。響應有HTTP狀態代碼404

注發佈請求正常工作，當我使用Content-Type: application/x-www-form-urlencoded

它也適用於郵差與應用/ JSON在Content-Type頭中設置。

角控制器：

.controller('View1Ctrl', function($scope, $http) { 

    var data = { 
    name: "name" 
    }; 
    $http({ 
    url: 'http://localhost:3000/api/student_create', 
    dataType: 'json', 
    method: 'POST', 
    data:data, 
    headers: { 
     "Accept": "application/json", 
     "Content-Type": "application/json", 
     "Access-Control-Allow-Origin": "*" 
    } 
    }).then(function(response) { 
    console.log(response) 
    }, function(error) { 
    console.log(error) 
    }); 

});

API控制器（導軌）：

class ApiController < ApplicationController 
    before_action :set_headers 
    skip_before_action :verify_authenticity_token 

    def set_headers 
    headers['Access-Control-Allow-Origin'] = '*' 
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT' 
    headers['Access-Control-Request-Method'] = '*' 
    headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization' 
    end 
    def create_student 
    student = StudentUser.new 
    student.name= params[:name] 
    student.save 
    render json: "test".to_json #temporary 
    end

路線：post 'api/student_create' => 'api#create_student'

編輯：前端是http://localhost:8008，後端是在localhost：3000

來源

2017-05-28 Riyaz Shaikh

什麼是數據的大小你正在試圖發佈？ – alphapilgrim

這只是文字。（在'data'在相位控制器對象） –

您可以驗證您的發送對象是有效的JSON對象 – alphapilgrim

嗨我也遇到了這個問題，當我與Angular交互Rails。經過大量的研究，我發現瞭解決這個問題的寶石'架子'。您可以按照其文檔here。默認情況下，Rails不允許跨源數據共享。所以基本上它很好地處理了跨源請求。

步驟：

安裝寶石：

gem install rack-cors

或者在你的Gemfile：

gem 'rack-cors', :require => 'rack/cors'

application.rb中文件

module YourApp 
    class Application < Rails::Application 

    # ... 

    # Rails 3/4 

    config.middleware.insert_before 0, "Rack::Cors" do 
     allow do 
     origins '*' 
     resource '*', :headers => :any, :methods => [:get, :post, :options] 
     end 
    end 

    # Rails 5 

    config.middleware.insert_before 0, Rack::Cors do 
     allow do 
     origins '*' 
     resource '*', :headers => :any, :methods => [:get, :post, :options] 
     end 
    end 

    end 
end

來源

2017-05-30 07:47:11 Aashish

試試下面的，從How to Configure CORS Accept Headers in Rails API Application

所以，即使你的消費者是在「localhost：3000」和你的供應商是在「localhost：3001」，響應將被忽略，除非您的Web服務設置一個寬容的CORS政策。該策略由供應商在消費者應用（例如瀏覽器）註定要強制實施的HTTP響應中設置特定的CORS頭部來定義。例如，在配置這些標題：

# in config/application.rb 
config.action_dispatch.default_headers = { 
    'Access-Control-Allow-Origin' => 'http://my-web-service-consumer-site.com', 
    'Access-Control-Request-Method' => % w { 
    GET POST OPTIONS 
    }.join(",") 
}

每站點：

請注意，設置 '訪問控制允許來源'=> '*' 高度氣餒，除非您正在提供一個公共API，旨在供任何外部用戶訪問。

來源

2017-05-28 18:07:27 alphapilgrim

我仍然得到同樣的錯誤:( –

你可以嘗試使用數據類型：「JSONP」嘗試搜索如何iplement JSONP跨域Ajax調用。 –

無法使用內容類型：應用程序/ json從angular到rails

回答

相關問題