Day 34, mini project (asp.net과 react의 CORS 문제 해결!)

내일부터 미니 프로젝트 한달간 시작이고

오늘은 어떻게 진행할지 설명 들었다.

 

 

 

 

 

 

아래 블로그 참고하면

VS에서 asp.net과 리액트 한번에 불러올 수 있다.

 

ASP.NET Core(닷넷 코어) + React(리액트) Visual Studio(비주얼 스튜디오) 프로젝트 생성

 

 

 

 

 

그런데 생각보다 불편해서 나는 

VS에서 asp.net 하고

VSC에서 React 하려고 한다.

 

 

 

 

 

 

Backend

 

 

 

 

 

 

 

StudyController.cs

 

using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;

namespace backend.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class StudyController : Controller
    {
        [DisableCors]
        [HttpGet("")]
        public string Study()
        {
            return "good";
        }
        
    }
}

 

 

 

 

 

Program.cs

Cors 에러 때문에 또 고생함

C#은 처음이라..........ㅎ

namespace backend
{
    public class Program
        {
        public static void Main(string[] args)
        {
            var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddCors(options =>
            {
                options.AddPolicy(name: MyAllowSpecificOrigins,
                                  policy =>
                                  {
                                      policy.WithOrigins("http://localhost:3000");
                                  });
            });

            // Add services to the container.

            builder.Services.AddControllers();
            // Learn more about configuring Swagger/OpenAPI at 
https://aka.ms/aspnetcore/swashbuckle
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseSwagger();
                app.UseSwaggerUI();
            }

            app.UseHttpsRedirection();

            app.UseCors(MyAllowSpecificOrigins);

            app.UseAuthorization();


            app.MapControllers();

            app.Run();
        }
    }
}

 

 

 

---

 

 

 

Frontend

 

 

app.js

 

import "./App.css";

import React, { useEffect, useState } from "react";

import axios from "axios";

function App() {

  const [data, setData] = useState("");

  useEffect(() => {

    axios

      .get("/study")

      .then((response) => {

        setData(response.data);

      })

      .catch((error) => {

        console.error("Error:", error);

      });

  }, []);

  return (

    <div className="App">

      <p>{data}</p>

      <p>abc</p>

    </div>

  );

}

export default App;

 

 

 

 

package.json

proxy 추가!

{

  "name": "study",

  "version": "0.1.0",

  "private": true,

  "proxy": "https://localhost:7078",

  "dependencies": {