How to link asp.net mvc core 1.1 with vue.js?

Question

ASP.NET

Hello. There was a problem passing the json object to the front end.
Here is the controller where I look up the object in the database and return it as a json object:

public IActionResult Index(Currencies cur1, Currencies cur2) {
         int SearchedId = -1;
         foreach (Pair pair in _context.Pairs)
         {
             if (pair.Currency1 == cur1 && pair.Currency2 == cur2)
             {
                 SearchedId = pair.Id;
             }
         }
         var SearchedPair = _context.Pairs.Single(m => m.Id == SearchedId);
        return View(Json(new{SearchedPair, _context.Rates}));
     }

next I accept it with the vue-resource plugin for vue:

Vue.use(VueResource)
var app = new Vue({
el: "#app",
data: {
    Pair: {
        Currency1: "rur",
        Currency2: "kzt",
    },
    DataFromDb: null
},
computed: {
    endpoint: function () { 
        return 'localhost:55332/Rates?cur1=' + this.Pair.Currency1 + '&cur2=' + this.Pair.Currency2;
    }
},
methods: {
    getPair: function () {
        this.$http.get(this.endpoint).then(function (response) {
            console.log(response);
            this.DataFromDb = response
        }, function (error) {
            console.log(error)
        })
    }
},
created: function () {
    this.getPair()
}
})

in Index.cshtml I want to display the accepted object: after starting the server, in the dev-tools console I get an error:
<div id="app">{{ $data | json }}</div>

XMLHttpRequest cannot load localhost:55332/Rates?cur1=rur&cur2=kzt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I can't figure out what I'm doing wrong and what could be causing this error. I tried to start chrome with the --disable-web-security key - it did not help. please help me to solve this problem.

Answer 1

this is how it should be:

[HttpPost]
        public JsonResult Index(Currencies cur1, Currencies cur2) {
             int SeachedId = -1;
             foreach (Pair pair in _context.Pairs)
             {
                 if (pair.Currency1 == cur1 && pair.Currency2 == cur2)
                 {
                     SeachedId = pair.Id;
                 }
             }
             var SeachedPair = _context.Pairs.Single(m => m.Id == SeachedId);
            return Json(new{SeachedPair, _context.Rates});
         }
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

getPare: function () {
            if (this.Pare.Currency1 && this.Pare.Currency2) {
                this.$http.post('http://localhost:5000/Rates?cur1=' + this.Pare.Currency1 + '&cur2=' + this.Pare.Currency2).then(response => {
                    console.log(response);
                    this.DataFromDb = response.body;
                }, response => {
                    console.log("error")
                })
            }
        },

Answer 2

1. An error is displayed that you are making a request to another domain
2. View(Json(new{SearchedPair, _context.Rates})) will return not a Json object, but go to generate a page according to the template in the View with the passed model of the IActionResult type