内容安全政策在 Vue.js 中阻止了我的休息电话

Question

我刚开始使用 vue.js 并尝试向我的服务器发送 post 请求，但该请求被 CSP 阻止了。

错误信息：

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

我已经尝试更改我的元标记，但还没有找到任何解决方案。

<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:;">

休息电话：

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>```

Answer 1

在您的服务器中，您需要 return Content-Security-Policy header.

要允许一切（不安全），请使用以下 (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';

内容安全政策在 Vue.js 中阻止了我的休息电话

Content security policy blocks my rest calls in Vue.js

rest

cordova

content-security-policy

vue.js

错误信息：