我使用Vue.js和Flask创建了一个网站。我使用“localhost”作为主机名在本地计算机上测试,一切正常。但是当我向我的服务器发送代码并使用我的域名(example.com)更改主机名时,虽然我在服务器端(在服务器上打开firefox)时运行良好,但我无法从客户端进行(在我的本地计算机上打开一个firefox)。在web开发者控制台中没有错误(没有任何响应或来自烧瓶控制台的日志),但我注意到,当从客户端访问时,所有的get请求都以某种方式被阻止。我正在使用axios和CORS但不熟悉它们。任何人都可以帮助我吗?谢谢!
以下是我的一些代码。
package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --public example.com",
"start": "npm run dev",
"build": "node build/build.js"
},
webpack.dev.conf.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: 'example.com',//HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
前端发送请求的ReactPanel.vue
中的部分代码
getNaiveMetricsFromBackend(){
var sub_area_list=this.getAreaConfList()
const path = `http://example.com:5000/api/naivemetrics`
axios.get(path, {params:{
data:JSON.stringify(sub_area_list)
}})
.then(response => {
this.results = response.data.subSet
})
.catch(error => {
console.log(error)
})
}
flask_prog.py
中用于后端响应的部分代码
# TO avoid {{}} conflict with Vue
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='<%',
block_end_string='%>',
variable_start_string='%%',
variable_end_string='%%',
comment_start_string='<#',
comment_end_string='#>',
))
app = CustomFlask(__name__,
static_folder='../../dist/static',
template_folder='../../dist') # To use frontend built files
# use this only when need external visit from frontend
cors=CORS(app,resources={r"/api/*":{"origins":"*"}})
和
@app.route('/api/naivemetrics/')
def naivemetrics():
sub_area_str=request.args["data"]
res=naiveHandler(sub_area_str)
response={
'subSet':res
}
return jsonify(response)