I am new to react and new to jspdf pdf creator. I am getting the following error in my jspdf file when I click download.
It shows cors policy error:
This is the function where I am generating the pdf :
generatePDF = () => {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.querySelector("#content"), {
callback: function(pdf) {
pdf.save("Coil_Details.pdf");
}
});
};
This is the function where I am getting the data:
getData = async () => {
var ID = this.props.id;
var promise = await this.getAuthorization();
console.log("ID:" + ID);
axios({
method: "GET",
url: serverDetails.jwtTokenGenerationURL,
params: {
"jwt-token": jwtService.GetJWT()
}
})
.then(response => {
if (response.statusText != "" && response.statusText != "OK") {
return Promise.reject(response.statusText);
} else {
serverDetails.jwtResponse = response.data;
//return response.data;
}
})
.then(response => {
var url = "api/observation/GetCoilImages";
url += "?jwt=" + serverDetails.jwtResponse;
url += "&ID=" + ID;
axiosAPI
.get(url)
.then(response => {
if (response.statusText != "" && response.statusText == "OK") {
// window.open(response.data, '_blank');
console.log("Response:" + response.data);
console.log("Response1:" + response.data[0]);
var code = [];
for (var i in response.data) {
code[i] = response.data[i];
console.log("Code:" + code);
}
this.setState({ code });
}
this.setState({
modal: !this.state.modal
});
});
});
};
The corresponding C# method is like this:
[HttpGet]
[Route("GetCoilImages")]
public IHttpActionResult GetCoilImages(string jwt, string ID)
{
List<string> coilURL = new List<string>();
string connectionstring = Utilities.SQL_DB1;// our SQL DB connection
SqlConnection conn1 = new SqlConnection(connectionstring);
DataTable dt = new DataTable();
string query = "Select CCD_IMAGE_URL from T_CQL_COIL_DESC where CCD_COIL_ID = '" +
ID + "'";
//SqlConnection conn = new SqlConnection(connectionstring);
SqlCommand cmd = new SqlCommand(query, conn1);
conn1.Open();
// create data adapter
SqlDataAdapter da = new SqlDataAdapter(cmd);
// this will query your database and return the result to your datatable
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
coilURL.Add(imgurl+dt.Rows[i]["CCD_IMAGE_URL"].ToString());
}
}
conn1.Close();
da.Dispose();
return Ok(coilURL);
}
I have also handled cors policy in web.api.config, like so:
namespace coilQuality
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
var constraints = new { httpMethod = new HttpMethodConstraint(HttpMethod.Options) };
config.Routes.IgnoreRoute("OPTIONS", "*pathInfo", constraints);
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
How do I solve this CORS issue not using extensions in crome like allow cors or cors unblock. Please help??
