2

I just started working with vue.js and try to send a post request to my server, but the request is blocked by CSP.

Error Message:

Refused to connect to 'http://127.0.0.1:5000/login' because it violates the following Content Security Policy directive: "connect-src 'self' ws:".

I have already tried to change my meta-tag but have not come to any solution.

<meta http-equiv=Content-Security-Policy content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src 'self' ws:;">

Rest call:

export default {
  name: "Login",
  data() {
    return {
      loading: false,
      login: {
        email: "",
        password: ""
      }
    }
  },
  methods: {

    auth(){
      fetch("http://127.0.0.1:5000/login",{
        body: JSON.stringify(this.login),
        method: "POST",
        headers:{
          "Content-Type": "application/json"
        },
        credentials: 'same-origin'
      })
      .then(res =>{
        severdata = JSON.parse(res)
        console.log(serverdata)
      })
      console.log(this.login.email)
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 5000);
    }
  }
};
</script>```
Thomas Hüttmaier
  • 117
  • 1
  • 9
  • Are you using a build system? Did you read [this](https://vuejs.org/v2/guide/installation.html#CSP-environments)? – zero298 Jul 25 '19 at 15:12

1 Answers1

1

In your server , you need to return the Content-Security-Policy header.

To allow everything (unsafe), use the following (found on this post): 

default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';
Félix
  • 388
  • 1
  • 9